Когда я создаю перетаскиваемый клон и помещаю его в перетаскиваемый, я не могу перетащить его снова.
-
22-08-2019 - |
Вопрос
Когда я создаю перетаскиваемый клон и помещаю его в перетаскиваемый, я не могу перетащить его снова.Как мне это сделать?Во-вторых, я могу только понять, как нам .append
чтобы добавить клон в dropable.Но затем он привязывается к верхнему левому углу после любого существующего элемента, а не к позиции перетаскивания.
$(document).ready(function() {
$("#container").droppable({
drop: function(event, ui) {
$(this).append($(ui.draggable).clone());
}
});
$(".product").draggable({
helper: 'clone'
});
});
</script>
<div id="container">
</div>
<div id="products">
<img id="productid_1" src="images/pic1.jpg" class="product" alt="" title="" />
<img id="productid_2" src="images/pic2.jpg" class="product" alt="" title="" />
<img id="productid_3" src="images/pic3.jpg" class="product" alt="" title="" />
</div>
Решение
Один из способов сделать это:
$(document).ready(function() {
$("#container").droppable({
accept: '.product',
drop: function(event, ui) {
$(this).append($("ui.draggable").clone());
$("#container .product").addClass("item");
$(".item").removeClass("ui-draggable product");
$(".item").draggable({
containment: 'parent',
grid: [150,150]
});
}
});
$(".product").draggable({
helper: 'clone'
});
});
Но я не уверен, что это красивое и чистое кодирование.
Другие советы
Я нашел этот вопрос через Google.Я также не мог предотвратить привязку позиций к контейнеру, пока не изменил «ui.draggable» на «ui.helper» при добавлении:
$(this).append($(ui.helper).clone());
Для тех, кто пытается переместить выпавший предмет.Посмотрите здесь.
JQuery перетаскивание и клонирование.
На самом деле мне пришлось использовать код, который выглядит как
$(item).css('position', 'absolute');
$(item).css('top', ui.position.top - $(this).position().top);
$(item).css('left', ui.position.left - $(this).position().left);
сделать это.
Вот мое решение: оно позволяет перетаскивать клон, а затем заменять его по мере необходимости другим перетаскиванием.Он также имеет параметр функции обратного вызова, который передает обратно отброшенный объект div, чтобы вы могли что-то сделать с выбранным jquery div после удаления.
refreshDragDrop = function(dragClassName,dropDivId, callback) {
$( "." + dragClassName ).draggable({
connectToSortable: "#" + dropDivId,
helper: "clone",
revert: "invalid"
});
$("#" + dropDivId).droppable({
accept: '.' + dragClassName,
drop: function (event, ui) {
var $this = $(this),
maxItemsCount = 1;
if ($this.children('div').length == maxItemsCount ){
//too many item,just replace
$(this).html($(ui.draggable).clone());
//ui.sender.draggable('cancel');
} else {
$(this).append($(ui.draggable).clone());
}
if (typeof callback == "function") callback($this.children('div'));
}
});
}