0

Есть совокупность 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>
2
  • Дайте HTML-код.
    – Oleg
    29 мар 2012 в 8:02
  • 2 exec: Спасибо за внимание, добавил целиком html. 29 мар 2012 в 8:38

2 ответа 2

1

Возможно Вам нужно это?

1

Взял пример с http://jqueryui.com. Немного переделал и вот что получилось По сути, мы добавили проверку в функцию moveInImage

if ($('#trash ul li').length) moveOutImage( $('#trash ul li') );

если див не пустой, то выкинуть из него картинку.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.