Question

我需要在这里解决一些问题：

删除事件后删除按钮不起作用。删除仅适用于不在dropzone中的项目。不知道这里有什么问题。此外，最好将删除按钮添加到每个已删除的项目而不是克隆它。
我需要能够对丢弃的项目进行排序。 sortable不包含在下面的当前演示中。

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

Current Jsfiddle code demo

请帮忙......

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);

拖动+ droppable事件后，Mootools删除事件不起作用

1 个答案:

http://jsfiddle.net/m6xDt/