1

ここでいくつか修正する必要があります。

  1. ドロップ イベントの後、削除ボタンは機能しません。削除は、ドロップゾーンにないアイテムに対してのみ機能します。ここで何が問題なのかわかりません。また、ドロップされたアイテムを複製するのではなく、ドロップされた各アイテムに削除ボタンを追加することをお勧めします。

  2. ドロップされたアイテムを並べ替えることができる必要があります。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');
    }
});

現在の Jsfiddle コードのデモ

助けてください...

4

1 に答える 1

2

あなたに欠けているものは2つあります。

1つ目は、このコードがここから始まるということです

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

は、これが起動するのを妨げています (.deleteは の子孫であるため.item):

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

これは、投稿した 2 つの間にこの行を追加することで修正できます。クリックがbutton

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

2 つ目の問題は、ドロップされた要素でクリック イベントをデリゲートする必要があることです。これは次のように行うことができます。

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/

于 2014-05-18T20:59:14.023 に答える