Есть совокупность div-ов класса "emptyspace", представляющих собой некое свободное место на полке. В некоторых из них лежат div-ы класса "item", представляющие некие предметы, занимающие вышеуказанные пустые места на полке. Нижеприведенный код позволяет перетягивать предметы (div-ы класса "item") на пустые места (div-ы класса "emptyspace"), а в случае, если место уже занято другим предметом, удалять его и на освободившееся место класть перетянутый предмет. Как сделать так, чтобы предмет, на который перетягивают новый предмет, не удалялся, а автоматически перекладывался на место выдавившего его предмета? Огромное спасибо! UPD: пожалуйста, взгляните на код, там есть два места, в которые я понимаю, что нужно вставить, но не знаю как.
<html>
<head>
<title>jQuery UI Draggable & Droppable test</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
<style type="text/css">
div.item {
float: left;
}
div.emptyspace {
width: 220px;
height:300px;
float: left;
}
</style>
</head>
<body>
<div class="emptyspace"></div>
<div class="emptyspace"></div>
<div class="emptyspace">
<div class="item"><img src="item1.jpg" alt="item1" width="200" height="265"/>
</div>
</div>
<div class="emptyspace">
<div class="item"><img src="item2.jpg" alt="item2" width="200" height="265"/>
</div>
</div>
<div class="emptyspace"></div>
<script type="text/javascript">
$(document).ready(function(){
$('div.item').draggable({
helper : 'clone',
opacity : 0.3,
Может быть вот здесь вставить функцию-обработчик, которая в момент начала перетаскивания будет сохранять родительский узел перетаскиваемого элемента (освободившееся место на полке) в некую переменную, а затем дальше использовать эту переменную, чтобы добавить в дети к этому узлу новый элемент, который мы прежде удаляли, перетаскивая предмет на новое место. Как это сделать?
});
$('div.emptyspace').droppable({
accept : 'div.item',
drop : function(event, ui) {
$(this).empty();
А вот здесь как-то получить ссылку на предмет, который лежал в этом droppable и, используя полученную ранее переменную, вместо удаления, добавить этот предмет на полку, с которой мы взяли перетаскиваемый предмет. Как это сделать?
$(this).prepend(ui.draggable);
}
});
});
</script>
</body>
</html>