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

Question

jQuery UIのドラッグ可能なアイテムとドロップ可能アイテムを使用する場合、ドロップ時にドラッグアンドドロップしたエレメントをどのように変更しますか？私は別のソート可能なDIVに1つの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に位置していますあなたが与えたのリンクから完全なJavaScriptコードを撮影

Answer 1

、それを動作させるために、次のようにあなたがそれを変更することができます。

$(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. ドロップイベント（あなたがあなたの質問に示すこと）あなたがaccept適切なコンテンツをINGのなかったため、発射されなかった
2. もしあなたが両方とも.sortable & .droppableなら、あなたは奇妙なダブルイベントの発射に終わります。とにかくこれは不要です。なぜなら、ドロップ可能イベントをソート可能なイベントから効果的に取得できるのは、ドラッグ可能イベントとドロップイベントをリンクしているからです。ストップは任意のソートが&を受け取る停止するたびにトリガーされますので、（代わりにstopのソート可能なのreceiveイベントを使用してよりよいだっただろうあなたに新しいアイテムをドロップするときに起動するように特別にそこにある - 注意すべきもう一つの事は

ソートリスト）が表示されますが、itemがまだソート可能リストに追加されていないため、正しく機能しないため、その時点で変更することはできません。他のソート可能なアイテムのどれもがelemtxtクラスを持たないため、停止時には正常に機能します。