Drag and Drop - плагин JQuery - PullRequest
Новая
       0

Drag and Drop - плагин JQuery

2 голосов
/ 19 ноября 2011

Я пытаюсь создать свой собственный плагин Drag and Drop.

Мой плагин: 

$.fn.drag = function(options) {
    var defaults = {
        revert: false,
        onDrag: function() {},
        onDrop: function() {}
    };
    var o = $.extend(defaults, options);
    return this.each(function() {
        var position = $(this).position();
        var ptop = position.top;
        var pleft = position.left;
        var down = false;
        $(this).mousedown(function(event) {
            down = true;
            $(this).css({
                cursor: 'move',
            }).mousemove(function(event) {
                if (down == true) {
                    $(this).css({
                        cursor: 'move',
                    });
                    var w = $(this).width();
                    var h = $(this).height();
                    var left3 = (w / 2) + 7;
                    var top3 = (h / 2) + 7;
                    $(this).css({
                        cursor: 'move',
                        left: (event.clientX) + (3 * 3) - left3,
                        top: (event.clientY) + (3 * 3) - top3
                    });
                }
            }).bind('mousemove', o.onDrag).mouseup(function() {
                down = false;
                $(this).css({
                    cursor: 'default',
                });
                if (o.revert == true) {
                    $(this).animate({
                        top: ptop,
                        left: pleft
                    }, 300);
                } else {}
            }).bind('mouseup', o.onDrop);
        });
    });
}

Моя проблема: В тот момент, когда я пытаюсь перетащить соответствующий элемент, он центруетсякурсор внутри.Я сделал это специально, потому что я не знал, как это сделать, поэтому, если я нажму на любую часть элемента, он будет перетаскивать.Как вы можете видеть здесь

Центрирующий курсор внутри кода элемента: 

var w = $(this).width();
var h = $(this).height();
var left3 = (w / 2) + 7;
var top3 = (h / 2) + 7;
$(this).css({
    cursor: 'move',
    left: (event.clientX) + (3 * 3) - left3,
    top: (event.clientY) + (3 * 3) - top3
});

Есть ли способ не центрировать курсор внутри элемента и иметь возможность перетаскиватьэлемент, где вы нажимаете его?

Заранее спасибо: D

1 Ответ

3 голосов
/ 19 ноября 2011

Вы можете отслеживать разницу в положении курсора при mousemove с начальной позицией курсора при mousedown редактировании и применять эти данные соответствующим образом: http://jsfiddle.net/BggPn/15/.

$(this).mousedown(function(event) {
    down = true;
    var dx = event.pageX - $(this).position().left, // difference from left border
        dy = event.pageY - $(this).position().top;  // difference from top border

и:

$(this).css({
    cursor: 'move',         // you had set the cursor already by the way
    left: event.pageX - dx, // set left border to cursor x position minus difference
    top:  event.pageY - dy  // set top border to cursor y position minus difference
});
...