jquery UI ziehbar mit Live

Question

Dies ist ein ziehbares sortierbares Beispiel auf der jqueryui-Website, ich muss live() mit diesem verwenden (denke ich), weil die Elemente durch Ajax erstellt werden, weiß jemand, wie man das Live-Ereignis anwenden folgende?

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

Answer 1

Sie nicht habenlive mit diesem zu verwenden (und ich glaube nicht, Sie können), so dass sie nur anschließen, sobald Sie sie hinzugefügt haben, in der success Handler. bei Verwendung von zum Beispiel load:

$("#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(); 
}); 

Live Example

Das nutzt diese modifizierte HTML aus der jQuery UI Demo-Seite (nur id Werte mit data-name stattdessen ersetzt, so dass sie nicht eindeutig sein müssen):

<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

Ich glaube nicht, dass es möglich ist, das Live-Event so zu gestalten, wie Sie es wollen. Die beste Option, die Sie haben, besteht darin, eine Callback-Funktion zu verwenden, wenn Sie der Liste ein neues Element hinzufügen und das neue Objekt jedes Mal, wenn ein neues Element vorhanden ist, wieder ziehbar machen können.

Etwas wie folgt aus:

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

Answer 3

hatte ich genau das gleiche Problem, und ich denke, dass es eine viel bessere Idee ist es, dieses Problem mit einem JQuery AddIn-Methode zu lösen:

//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(); 

Dank this post für die Antwort.

Dies gibt Ihnen eine wiederverwendbare Lösung und Sie müssen Ihre Implementierung nicht für jede Ajax Methode wiederholen.