Нужна помощь с проблемой смещения экземпляра Jquery UI Drag and Drop - PullRequest
0 голосов
/ 13 сентября 2018

Я работаю над функцией перетаскивания и столкнулся с проблемой со смещением на перетаскиваемом экземпляре. по какой-то причине, когда я использую следующий код ниже, моя область перетаскивания меняет позиции. Без смещения мои перетаскиваемые элементы не следуют за мышью и плавают в верхней части элемента div при перетаскивании. Пример страницы http://54.162.89.47. Заранее благодарим за помощь.

start: function(event, ui){  
$(this).draggable('instance').offset.click = {
    left: Math.floor(ui.helper.width() / 2),
    top: Math.floor(ui.helper.height() / 2)
};
} 

Весь скрипт выглядит следующим образом:

$(".draggable").draggable({ 
cursor: "crosshair", 
revert: "invalid", 
helper: "clone",
tolerance: "fit",
start: function(event, ui){
    console.log($(this).draggable('instance').offset.click)
    $(this).draggable('instance').offset.click = {
        left: Math.floor(ui.helper.width() / 2),
        top: Math.floor(ui.helper.height() / 2)
    }; 
}
});
var text = '', droppedOn = '';

$("#drop").droppable({ accept: ".draggable", 
    drop: function(event, ui) {
        console.log("drop");
        $(this).removeClass("border").removeClass("over");
        var dropped = ui.draggable;
        droppedOn = $(this);
        text = $(dropped).attr('data-text');
        $('#drop-text').html('<p>'+text+'</p>');    
        $(dropped).clone().appendTo(droppedOn);         
    }, 
    over: function(event, elem) {
        $(this).addClass("over");
        $(droppedOn).find('img').remove();
    },
    out: function(event, elem) {
        $(this).removeClass("over");
    }
});
...