Взгляните на следующий код:
JavaScript
$(function() {
var boxes = [{
id: "dropBox1",
class: "dropContainer",
props: {
top: 10,
left: 240,
width: 200,
height: 75
}
},
{
id: "dropBox2",
class: "dropContainer",
props: {
top: 225,
left: 240,
width: 200,
height: 150
}
}, {
id: "dropBox3",
class: "dropContainer",
props: {
top: 10,
left: 440,
width: 200,
height: 150
}
}
];
function drawRectangle(l, t, w, h, id, cn) {
$("<div>", {
id: id,
class: cn
})
.css({
position: "absolute",
top: t + "px",
left: l + "px",
width: w + "px",
height: h + "px",
"background-color": "#D8ECF3",
border: "10px solid lightblue"
})
.appendTo("body");
}
function makeDropTarget($t) {
$t.droppable({
drop: function(event, ui) {
console.log("DROP:", ui.draggable.text(), "ON:", $(this).attr("id"));
}
});
}
function createDropBoxes(d) {
$.each(d, function(k, box) {
console.log("Create Rect:", box);
drawRectangle(box.props.left, box.props.top, box.props.width, box.props.height, box.id, box.class);
makeDropTarget($("#" + box.id));
});
}
function deleteDropBoxes(d) {
$.each(d, function(k, box) {
$("#" + box.id).remove();
});
}
$('.tile').draggable({
helper: 'clone',
stack: ".tile",
start: function(event, ui) {
createDropBoxes(boxes);
},
stop: function(event, ui) {
deleteDropBoxes(boxes);
}
});
});
Рабочий пример: https://jsfiddle.net/Twisty/wLrj3k08/
Я бы посоветовал остаться либо со всем собственным JavaScript, либо со всеми jQuery. Это становится проще, когда вы не смешиваете два в своем коде.
Я бы также посоветовал поместить все данные вашего ящика в массив объектов. Упрощает итерацию, хранение и т. Д. Он не должен быть таким сложным, но, на мой взгляд, с ним немного проще работать.
Хорошее использование функций может очень помочь. Мне нравится трэить и держать их простыми, чтобы их было легко использовать во многих ситуациях. Итак имеем:
drawRectangle(l, t, w, h, id, cn) - создает и добавляет <div> с заданными свойствами makeDropTarget($t) - используя объект jQuery в качестве цели, сделайте цель сбрасываемой createDropBoxes(d) - создать в массовом порядке несколько выпадающих блоков на основе конкретных данных блоков (массив объектов) deleteDropBoxes(d) - массовое удаление нескольких выпадающих списков на основе определенных данных (массив объектов)
Возможно, вы захотите сделать функцию создания и удаления для одной цели, но вы можете использовать это и для этого:
deleteDropBoxes([{id: "dropBox1"}]);
Это сработает для удаления одной из целей перетаскивания по идентификатору.
Надеюсь, это поможет.