jQuery 드래그 앤 드롭으로 div가 복사됩니다.

Question

좋아, 다른 질문에서이 코드 스 니펫을 가져 와서 내 인생을 위선적으로 말하지 않습니다. 그 중 하나를 기억하십시오. 그렇지 않으면 그 질문을 부활 시키려고합니다. 이것은 내가 성취하려고하는 것입니다 :

나는 다양한 div를 갖고 있고, 나를 끌어다가 위치를 바꿀 수 있기를 바랍니다. 그래서 붉은 색 정사각형을 잡고 파란색 사각형에 떨어 뜨리면, 그들은 장소를 바꿀 것입니다. (그들의 위치에 스냅). 지금은 정말 기본적인 코드를 얻으려고 노력하고 있습니다. 일단 내용과 모양을 바꾸기 위해 스왑 된 다른 스타일 시트를 구현할 것입니다.

현재 코드에서 발생하는 문제는 드래그 앤 드롭하면 다시 원래 위치로 떨어지고 다른 div 뒤에 중복 된 div가 생성됩니다.

<div class="container"> 
<div class="item"></div> 
<div class="item"></div> 
<div class="item"></div> 
</div> 

스타일링이 않는 경우 여기에 문제가해야하지만, 난 그냥 100x100 픽셀로 설정, 하나의 빨간색, 하나

$(document).ready(function() { 
    src = null; 
    options = { 
     revert:true, 
     /*axis: 'x',*/ 
     opacity: 0.8, 
     start: function() { 
      src = $(this).parent(); 
     } 
    } 

    $(".item").draggable(options); 
    $(".container").droppable({ 
     drop: function(event, ui) { 
      src.append(
       $('.item', this).remove().clone() 
        .removeClass().addClass("item") 
        .css({"left": '', "opacity": '',"top":''}) 
        .draggable(options) 
       ); 

      $(this).append(
       ui.draggable.remove().clone() 
        .removeClass().addClass("item") 
        .css({"left": '', "opacity": '',"top":''}) 
        .draggable(options) 
       ); 
     } 
    }); 

}); 

return this.pushStack(stack); 

마크 업이 있습니다 :이 여기에 의미가있다 JQuery와 희망 파란색, 녹색 중 하나입니다.

Answer 1

다음은이 문제에 대한 해결책입니다. 스왑 플러그인을 사용하고 jQuery UI 만 사용하십시오. 바이올린 : http://jsfiddle.net/promatik/YtQRd/

jQuery를 UI :

$(".item").on("mouseup", function(){ 
    $(this).css("top", "").css("left", ""); 
}); 

$(".item").draggable().droppable({ 
    drop: function(event, ui) { 
     draged = ui.draggable.css("top", "initial").css("left", "initial"); 
     dropped = $(this); 
     var elems = draged.parent().children(); 
     if(elems.index(draged) > elems.index(dropped)) { 
      temp = draged; 
      draged = dropped; 
      dropped = temp; 
     } 
     var nElem = draged.next(); 
     dropped.after(draged); 
     nElem.before(dropped); 
    } 
}); 

이 오브젝트의 스왑을 할 것입니다은 드래그 떨어졌다.