jQuery - ошибка перетаскиваемого элемента в стиле html + возврат в оригинальный контейнер

Question

jQuery - ошибка перетаскиваемого элемента в стиле html + возврат в оригинальный контейнер

0

Я хочу:

Сделайте перетаскиваемый элемент в контейнере.
Измените элементы html при удалении.
Когда удаленный элемент перетаскивается за пределы контейнера, верните его в исходное положение и снова вернитесь к старому html.

Мои текущие проблемы

Пока перетаскиваемый элемент витает в контейнере, он уже меняет свой стиль.
Я не могу понять, как добиться того, чтобы "сброшенный элемент возвращался в исходное положение" (пункт 3 @"Я хочу")

JSFiddle

http://jsfiddle.net/27Hqj/1/

HTML

<div class="draggable-items">
    <div class="main-groups">Item 1</div>
    <div class="main-groups">Item 2</div>
    <div class="main-groups">Item 3</div>
    <div class="main-groups">Item 4</div>
</div>
<div id="container"></div>

JQuery

$(function() {
    $( ".main-groups" ).draggable({
        connectToSortable: "#container",
        helper: "original",
        revert: "invalid"
    });

    $( "#container" ).sortable({
        revert: true,
        receive: function(event, ui) {
            var html = [];
            $(this).find('.main-groups').each(function() {
                html.push('<div class="main-groups"><b><a href="#'+$(this).attr("id")+'">'+$(this).html()+'</a></b></div>');
            });
            $(this).find('.main-groups').replaceWith(html.join(''));
        }
    });
});

Kristjan Kirpu 25 сен. 2013, в 15:43

Источник

Теги:

jquery

jquery-ui

drag-and-drop

2 ответа

0

Оказывается, что при наведении курсора на контейнер, и поскольку он был установлен на 100%, он менял ширину, чтобы соответствовать контейнеру.

Чтобы исправить это, я изменил это на следующее:

$( ".main-groups" ).draggable({
     connectToSortable: "#accordion2",
     helper: "original",
     revert: "invalid",
     start : function(event, ui) {
         ui.helper.width($(this).width());
     } 
});

Это не позволяет перетаскиваемому элементу изменять свою ширину при зависании контейнера. Он меняет свою ширину, когда падает на нее.

Но мне все еще не удалось выяснить, как я могу удалить выпавшие элементы в контейнере к исходному заполнителю.

Kristjan Kirpu 25 сен. 2013, в 13:42

Ещё вопросы

apaul · Accepted Answer · 2013-09-25T15-23-00.000Z

У вас может быть проще использовать подключенные сортируемые списки, например:

Рабочий пример

$(function () {
    $(".draggable-items").sortable({
        connectWith: "#container",
        tolerance: "pointer",
        over: function (event, ui) {
            $('.ui-sortable-helper').outerWidth($(".draggable-items").innerWidth()).css('background', '#333');
        }
    });

    $("#container").sortable({
        connectWith: ".draggable-items",
        tolerance: "pointer",
        over: function (event, ui) {
            $('.ui-sortable-helper').outerWidth($("#container").innerWidth()).css('background', 'blue');
        }

    });
});