mootools - Mootools delete event not working after Drag + droppable event

Question

I need to fix a few things here:

1. The delete button does not work after the drop event. The delete only works on items not in the dropzone. Not sure what is wrong here. also, it would be better to add the delete button to each dropped item instead of cloning it.

2. I need to be able sort the dropped items. sortable is not included in the current demo below.

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>

Here is the DomReady event:

   $$('.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');
    }
});

Current Jsfiddle code demo

Please help...

Answer 1

您缺少两件事。

首先是这段代码从这里开始

$$('.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/