Улучшение демонстрации перетаскивания Jquery

Question

У меня есть требование, которое очень близко соответствует этой демонстрации Jquery , которая является простой демонстрацией корзины покупок.По сути, мне нужно сделать два улучшения в этой демонстрации.

1. Мне нужно ввести текст вместе с доступными "продуктами".Поэтому, когда я перетаскиваю один из продуктов, текстовые поля должны быть перетащены вместе с тем, который будет заполнен пользователем в поле «корзина».

2. Мне нужен крестик перед каждым элементом в корзине, который можно использовать для удаления определенного элемента.Функция «разрушения» в Jquery, похоже, этого не делает.Итак, как мне выполнить удаление товаров из корзины?

Спасибо за помощь.

Answer 1

Вы можете указать своего собственного «помощника» в перетаскиваемом определении. Какой бы HTML вы не указали в качестве помощника, он будет отображаться во время анимации перетаскивания. В вашей сортируемой области (область добавления в демонстрации) вы можете переопределить функцию beforeStop. Там вы можете заменить товар тем, что вы хотите, чтобы он был в вашей корзине. В этом, вы можете добавить кнопку X с JavaScript или что-то, чтобы удалить элемент

Недавно я реализовал это для перетаскивания из таблицы данных в список, поэтому пришлось преобразовать tr в li. Это работает в jQuery 1.4, но я получаю странные результаты по капле, когда я перетаскиваю из вершины в 1.5, и я еще не решил это. Вот мое определение помощника

helper: function() {
        var text = this.children[0].innerText;
        var result = "<li id='"+this.id+"'>"+text+"</li>";
        return result;
    },

и вот моя функция beforeStop

beforeStop: function( event, ui ) {
        var id = ui.helper.attr( "id" );
        var text = ui.helper.text();
        var li = "<li id='"+id+"'>"+text+"</li>";
        $(ui.item).replaceWith( li );
    }