Событие удаления Mootools не работает после события Drag + droppable

Question

Мне нужно исправить несколько вещей здесь:

1. Кнопка удаления не работает после события удаления. Удаление работает только с элементами, не входящими в зону сброса. Не уверен, что здесь не так. Кроме того, было бы лучше добавить кнопку удаления для каждого отброшенного элемента, а не клонировать его.

2. Мне нужно уметь сортировать брошенные предметы. сортировка не включена в текущую демонстрацию ниже.

HTML:

    <div id="items">
    <div class="item"><span>Item 111111</span>
    <span class="delete"><button>Delete Line</button></span>
    </div>

    <div class="item"><span>Item 222222</span>
    <span class="delete"><button>Delete Line</button></span>
    </div>

    <div class="item"><span>Item 333333</span>
    <span class="delete"><button>Delete Line</button></span>
    </div>
</div>
<div style="" id="cart">
    <div class="info">Drag Items Here</div>
</div>


<div class=""><span>test delete works here but not after a drag event</span>
    <span class="delete"><button>Delete Line</button></span>
    </div>

Вот событие DomReady:

   $$('.item').addEvent('mousedown', function (event) {
    event.stop();

    // `this` refers to the element with the .item class
    var item = this;

    var clone = item.clone().setStyles(item.getCoordinates()).setStyles({
        opacity: 0.7,
        position: 'absolute'
    }).inject(document.body);

    var drag = new Drag.Move(clone, {

        droppables: $('cart'),

        onDrop: function (dragging, cart) {

            dragging.destroy();
            item.removeClass('item');
            item.addClass('item_dz');

            if (cart != null) {
                item.clone().inject(cart);
                cart.highlight('#4679BD', '#FFF');
                item.removeClass('item_dz');
                item.addClass('item');
            }
        },
        onEnter: function (dragging, cart) {
            cart.tween('background-color', '#FFF04F');
        },
        onLeave: function (dragging, cart) {
            cart.tween('background-color', '#FFF');
        },
        onCancel: function (dragging) {
            dragging.destroy();
        }
    });
    drag.start(event);
});


$$('.delete').addEvents({
    click: function () {
        this.getParent().destroy();
        this.destroy();
    },
    mouseover: function () {
        this.tween('opacity', '1');
        this.getPrevious(['.item_dz']).fade(0.3);
        this.getPrevious(['.item_dz']).tween('background-color', '#fff', '#f00');
    },
    mouseleave: function () {
        this.tween('opacity', '0.5');
        this.getPrevious(['.item_dz']).fade(1);
        this.getPrevious(['.item_dz']).tween('background-color', '#f00', '#fff');
    }
});

Текущая демонстрация кода Jsfiddle

Пожалуйста помоги...

Answer 1

Есть 2 вещи, которые вам не хватает.

Во-первых, этот код начинается здесь

$$('.item').addEvent('mousedown', function (event){
    event.stop(); 

мешает этому стрелять (так как .delete потомок .item):

$$('.delete').addEvents({
    click: function () {
        this.getParent().destroy();
        this.destroy();
    },

Это можно исправить, добавив эту строку между двумя опубликованными мной, чтобы игнорировать перетаскивание, если щелчок был в button

if (event.target == this.getParent().getElement('.delete button')) return;

Вторая проблема заключается в том, что вам нужно делегировать событие click для удаленного элемента. Вы можете сделать это так:

window.addEvent('click:relay(.delete)', function (){
    this.getParent().destroy();
    this.destroy();
})

Так меняется, что вы получаете это: http://jsfiddle.net/m6xDt/

Что касается сортировки, я не получил то, что вы хотели. Если вы объясните это лучше, я постараюсь помочь с этим тоже.

Чтобы сделать корзину сортируемой:

Запустите новый сортируемый класс, а затем добавьте каждый новый элемент в событие onDrop:

var mySortables = new Sortables('', {
    clone: true,
    opacity: 0.7
});

а затем внутри onDrop:

mySortables.addLists(cart);

http://jsfiddle.net/m6xDt/