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

There are 2 things you are missing.

The first is that this code starting here

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

is preventing this one to fire (since .delete is descendent of .item):

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

This can be fixed by adding this line between the two I posted, to ignore the drag if the click was in the button

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

The second problem is that you need to delegate the click event on the dropped element. You could do this like:

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

So changing that you get this: http://jsfiddle.net/m6xDt/

About the sorting part I didn't get what you wanted. If you explain that better I will try to help with that also.

To make the cart sortable:

Start a new sortable class and then add each new item to it inside the onDrop event:

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

and then inside the onDrop:

mySortables.addLists(cart);

http://jsfiddle.net/m6xDt/