0

要素をさまざまなコンテナにドラッグアンドドロップするjQueryプラグインがあります。たとえば、要素がコンテナ上にある場合など、いくつかのイベントをアタッチしたいと思います。これらのイベントは以前は完全に機能していましたが、その後機能しなくなりました。何らかの理由で、選択可能な特定のイベントは発生しませんが、たとえばクリックをバインドすると機能します。

例：

 //these are not working
$('#sortable2').bind("sortover", function(event, ui) {
    alert("here");
});
$('#sortable2').bind('sortreceive', function() {
      alert('User clicked on "sortable2."');
    });
$('.droptrue').bind("sortout", function(event, ui) {
    $(this).css("background", "transparent");
});

関連するコードは次のとおりです。

  var selectedClass = 'ui-state-highlight',
    clickDelay = 300,     // click time (milliseconds)
    lastClick, diffClick; // timestamps

$("ul.droptrue li")
    // Script to deferentiate a click from a mousedown for drag event
    .bind('mousedown mouseup', function(e){
        if (e.type=="mousedown") {
            lastClick = e.timeStamp; // get mousedown time
        } else {
            diffClick = e.timeStamp - lastClick;
            if ( diffClick < clickDelay ) {
                // add selected class to group draggable objects
                $(this).toggleClass(selectedClass);
            }
        }
    })
    .draggable({
        revertDuration: 10, // grouped items animate separately, so leave this number low
        containment: '.multiSelect',
        start: function(e, ui) {
            ui.helper.addClass(selectedClass);
        },
        stop: function(e, ui) {
            // reset group positions
            $('.' + selectedClass).css({ top:0, left:0 });
        },
        drag: function(e, ui) {
            // set selected group position to main dragged object
            // this works because the position is relative to the starting position
            $('.' + selectedClass).css({
                top : ui.position.top,
                left: ui.position.left
            });
        }
    });
$("ul.droptrue")
    .sortable()
    .droppable({
        drop: function(e, ui) {
            $('.' + selectedClass)
             .appendTo($(this))
             .add(ui.draggable) // ui.draggable is appended by the script, so add it after
             .removeClass(selectedClass)
             .css({ top:0, left:0 });
        }
    });

$('#total').text(autoCompleteSourceArray.length);
$('#filter-count').text(autoCompleteSourceArray.length);
//Adding Filtering functionality for the lists
$("#filter").keyup(function () {
    var filter = $(this).val(), count = 0;
    $("ul.droptrue:first li").each(function () {
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).addClass("hidden");
        } else {
            $(this).removeClass("hidden");
            count++;
        }
    });
    $("#filter-count").text(count);
});

// bind events in order to show or hide the message in the drop zones
$('ul[id^="sortable"]').live("sortover", function(event, ui) {
    $(this).css("background", "#f7f6d7");
});
$('ul[id^="sortable"]').live("sortout", function(event, ui) {
    $(this).css("background", "transparent");
});

どうもありがとう

4

1 に答える 1

-1

最近 jQuery 1.7+ に更新した場合は、live()メソッドが非推奨になっていることに気付くはずです。

jQuery 1.7 以降、.live() メソッドは非推奨になりました。.on() を使用して、イベント ハンドラーをアタッチします。古いバージョンの jQuery のユーザーは、.live() よりも .delegate() を使用する必要があります。

于 2011-12-08T15:15:18.877 に答える