web-dev-qa-db-ja.com

jQuery UIドラッグアンドドロップの使用：ドロップ時にドラッグされた要素を変更する

JQuery UIのドラッグ可能オブジェクトとドロップ可能オブジェクトを使用している場合、ドラッグアンドドロップされた要素をドロップ時にどのように変更しますか？ 1つのDIVを別のソート可能なDIVにドラッグしようとしています。ドロップ時に、ドロップされたDIVのクラスを変更し、そのinnerHTMLコンテンツを変更します。

StackOverflowに関するさまざまな質問を読んだ後、私のコードは次のようになります。

$(".column").droppable({
  accept: '.element-dragging', 
    drop: function(event, ui) {
        if ($(ui.draggable).hasClass("elemtxt")) {
            $(ui.draggable).replaceWith('<div class="element element-txt">This text box has been added!</div>');
        }
    }
})

うまくいきません。 :

私のコードの完全なコピーは---（http://www.marteki.com/jquery/bugkilling.php にあります。

javascriptjqueryjquery-uidrag-and-drop
31
Naa Marteki Reed

提供したリンクから完全なJavaScriptコードを取得し、次のように変更して機能させることができます。

$(function() {
    $(".elementbar div").draggable({
        connectToSortable: '.column',
        cursor: 'move',
        cursorAt: { top: 0, left: 0 },
        helper: 'clone',
        revert: 'invalid'
    });
    $(".elementbar div, .elementbar div img").disableSelection();
    $(".column").sortable({
        connectWith: '.column',
        cursor: 'move', 
        cursorAt: { top: 0, left: 0 }, 
        placeholder: 'ui-sortable-placeholder',
        tolerance: 'pointer',
        stop: function(event, ui) {
            if (ui.item.hasClass("elemtxt")) {
                ui.item.replaceWith('<div class="element element-txt">This text box has been added!</div>');
            }
        }
    });
    $(".element").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all");
});

いくつかの問題がありました：

  1. 適切なコンテンツをacceptingしていないため、ドロップイベント（質問に表示）は発生しませんでした。
  2. 両方ある場合.sortable＆.droppable奇妙なダブルイベントが発生することになります。とにかくこれは不要です。ドラッグ可能オブジェクトにリンクしている場合、sortableのイベントからドロップイベントを効果的に取得できるためです。

注意すべきもう1つのこと-receiveの代わりにsortableのstopイベントを使用した方がいいでしょう（ドロップするとソートが停止して受信が発生するたびにstopが発生するため、ドロップすると発生します）新しいアイテムを並べ替えリストに追加します）が、itemがまだ並べ替え可能なリストに追加されていないため、適切に機能しません。そのため、その時点では変更できません。他の並べ替え可能なアイテムにはelemtxtクラスがないため、停止しても問題なく動作します。

52
Alconja