2017-09-07 21 views
0

Während des Laufens dieses HTMLWie kann man zwischen zwei Containern ziehen und ablegen?

<div class="container"> 
    <div class="row"> 
    <div class="col"> 
     <div class="row"> 
     <div class="col"> 
      <div id="container1"> 
      <div class="dropEL col-6"> 
       <p>Element 1</p> 
      </div> 
      <div class="dropEL col-6"> 
       <p>Element 2</p> 
      </div> 
      </div> 
     </div> 
     <div class="col"> 
      <div id="container2"></div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

und dieses JS

var currentParent; 
$(".dropEL").draggable({ 
    containment: "#container2", 
    grid: [ 20, 40 ], 
    snap: true, 
    start: function(){ 
    currentParent = $(this).parent().attr('id'); 
    } 
}); 
$('#container1, #container2').droppable({ 
    accept:'.dropEL', 
    drop: function(event,ui) { 
    if (currentParent != $(this).attr('id')) { 
     $(ui.draggable).appendTo($(this)).removeAttr('style'); 
    } 
    $(this).find("div").on("click", function(e){ 
     e.stopImmediatePropagation(); 
     if($(this).hasClass("col-6")) { 
     $(this).find("p").css("background-color", "red"); 
     $(this).removeClass("col-6").addClass("col"); 
     } else { 
     $(this).find("p").css("background-color", "green"); 
     $(this).removeClass("col").addClass("col-6"); 
     } 
    }); 
    } 
}); 

ich in der Lage bin zu ziehen und aus dem Behälter 1 in den Behälter 2 fallen, aber ich kann nicht per Drag & Drop zurück in den Behälter 1 . Wie könnte ich?

CodePen hier

+1

https://stackoverflow.com/questions/14308290/jquery-draggable-and-droppable-between-two-containers-and-sortable – DenseCrab

+0

Mögliche Duplikat [jQuery ziehbar und abwerfbaren zwischen zwei Containern und sortierbar] (https://stackoverflow.com/questions/14308290/jquery-draggable-and-droppable-between-two-containers-and-sortable) –

+0

@cale_b Ich sah mir diese Antwort vor und ich konnte es nicht mit mir arbeiten lassen. –

Antwort

0

Gerade Code ändern, wie unten

$(".dropEL").draggable({ 
     containment: ".container", 
     grid: [ 20, 40 ], 
     snap: true, 
     start: function(){ 
     currentParent = $(this).parent().attr('id'); 
     } 
    }); 

erwähnt Sie Eindämmungs als # container2, dass die Ursache ist. Sie finden den aktualisierten Code Pen: https://codepen.io/anon/pen/wqLvQB

+0

ausgezeichnet, vielen dank, tbh ich hatte es auch erreicht und ich würde meine eigene Antwort hinzufügen, indem ich einfach den Containment-Status alle zusammen entfernen, https://codepen.io/anon/pen/XaLWgM –

Verwandte Themen