jquery UI live with draggable

Question

これはjqueryuiのウェブサイト上でドラッグ可能なソート可能な例です。私はlive（）を使用する必要があります（これは私が思う）、要素はajaxを通じて作成されています。以下？あなたはsuccessハンドラでは、それらを追加したら

<script> 
    $(function() { 
     $("#sortable").sortable({ 
      revert: true 
     }); 
     $("#draggable").draggable({ 
      connectToSortable: "#sortable", 
      helper: "clone", 
      revert: "invalid" 
     }); 
     $("ul, li").disableSelection(); 
    }); 
    </script> 

Answer 1

あなたははこれでliveを使用するを持っていない（と私はあなたができるとは思わない）、ちょうどそれらをフックアップ。

$("#target").load("your url", function() { 
    // Replace the selectors below to match what you load 
    $("#target *[data-name=sortable]").sortable({ 
     revert: true 
    }); 
    $("#target *[data-name=draggable]").draggable({ 
     connectToSortable: "#target *[data-name=sortable]", 
     helper: "clone", 
     revert: "invalid" 
    }); 
    $(this).find("ul, li").disableSelection(); 
}); 

のjQuery UIのデモページからこの修正HTMLを使用しています

Live Example

は（だけではなく、data-nameでid値を置き換えるので、彼らはユニークである必要はありません）：たとえば、場合loadを使用しました：

<ul> 
    <li data-name='draggable' class="ui-state-highlight">Drag me down</li> 
</ul> 

<ul data-name="sortable"> 
    <li class="ui-state-default">Item 1</li> 
    <li class="ui-state-default">Item 2</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
</ul> 

Answer 2

私はあなたが望むようにライブイベントを行うことはできないと思います。あなたが持っている最良の選択肢は、新しい要素をリストに追加し、新しい要素があるたびに新しいオブジェクトをドラッグ可能にするときに、コールバック関数を使用することです。

このような何か：

// Call to add a new element 
$.ajax({ 
    url: 'addElem', 
    success: function(data) { 
    $("#newDraggableObject").draggable({ 
     connectToSortable: "#sortable", 
     helper: "clone", 
     revert: "invalid" 
    }); 
    } 
}); 

Answer 3

私は正確に同じ問題を抱えていたし、私はjQueryのアドインメソッドを使用してこの問題を解決するために非常に良いアイデアだと思い：へ

//Add draggable feature: 
//Define a setup method for the draggable config so we can reuse it for dynamic elements 
$(function() { 
    jQuery.fn.draggableSetup = function draggableSetup() { 
     this.draggable(
     { 
      // enter your custom draggable code here... 
     }); 
     return this; 
    } 
}); 

//Apply the draggable config your dynamic elements after adding them 
$("#dynamic_element_id").draggableSetup(); 

感謝答えはthis postです。

これはあなたに再利用可能なソリューションを提供し、各Ajax メソッドの実装を繰り返す必要はありません。