Как установить начальную позицию JQuery UI Draggable - PullRequest
Новая
       3

Как установить начальную позицию JQuery UI Draggable

4 голосов
/ 12 августа 2011

Я использую пользовательский интерфейс jQuery и изотоп, изотоп делает кучу вещей для позиционирования элементов и портит начальную позицию перетаскиваемого элемента.

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

Я посмотрел на функцию 'start' и получил правильные координаты x, y из события, но я не могу применить эти значения к клонируемому перетаскиваемому элементу.

Мой код выглядит так 

jQuery('div.item').draggable({
         helper: function(event, ui){
                 jQuery('div.hold_items').isotope('destroy');
                  var item_dragged = jQuery(this).clone().appendTo('body').css({'z-index':500,'top':event.clientY, 'left':event.clientX});
                 start_isotope();
                 return recipe_dragged;

         }
});

Я должен выполнить запуск / остановку изотопа, чтобы решить проблему, когда изотоп нарушает функцию сбрасывания, а предметы не знают, куда их уронить.

Я уверен, что есть способ установить перетаскиваемое начальное положение, но я не могу найти его в документации, просто способ получить начало.

Ответы [ 2 ]

1 голос
/ 29 июня 2014

Публикация моего ответа, потому что я не мог найти ответ где-либо еще - у меня были проблемы, которые вы описываете, и я решил это следующим образом. Поместите помощника (он попытается сбросить до 0,0). Затем мы вернемсяfalse до того, как оно сброшено до 0,0. Оно отменяется и находится в правильном положении, но затем мы перезапускаем перетаскивание, копируя событие, которое использовалось для инициации перетаскивания. 

$(" #container").droppable({
drop: function (event, ui) {
    $(ui.draggable).detach().css({
        top: 0,
        left: 0
    }).appendTo(this);

}
});

$(" #draggable").draggable({
start: function (event, ui) {
    if ($(event.target).parent().is('.ui-droppable')) {
        var x = ($(this).offset().left);
        var y = ($(this).offset().top);
        var p = $(event.target).parent().parent();
        $(event.target).detach().insertAfter(p);
        $(ui.helper).css({
            'left': x - $(event.target).offset().left,
            'top': y - $(event.target).offset().top
        });
        var eventCopy = document.createEvent("MouseEvents");
        eventCopy.initMouseEvent(event.type, event.bubbles, event.cancelable, event.view, event.detail,
        event.pageX || event.layerX, event.pageY || event.layerY, event.clientX, event.clientY, event.ctrlKey, event.altKey,
        event.shiftKey, event.metaKey, event.button, event.relatedTarget);
        ui.dispatchEvent(eventCopy);
        return false;
    }
}
});
0 голосов
/ 18 октября 2012

для jquery вы можете попробовать использовать event.pageX и event.pageY как объяснено здесь .

...