Я работаю над функцией перетаскивания и столкнулся с проблемой со смещением на перетаскиваемом экземпляре. по какой-то причине, когда я использую следующий код ниже, моя область перетаскивания меняет позиции. Без смещения мои перетаскиваемые элементы не следуют за мышью и плавают в верхней части элемента 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");
}
});