draggables를 서로 드래그

Question

jQuery를 서로 드래그 할 수있는 방법이 있다면 제 질문은 무엇입니까? 나는 이것이 매우 모호하다는 것을 알기 때문에 나는 당신에게 내가 말하는 것을 보여줄 것이다.

나는 this을 복제하여 (편집 할 수 있음) 일부 스타일을 적용했습니다.

이것은 fiddle입니다.

'드래그'요소를 첫 번째 상자로 드래그 할 수 있습니다. 한 요소를 다른 요소 위로 드래그하면 다른 요소에 배치해야하는 솔루션이 필요합니다. 네가 나를 도울 수 있기를 바란다. (나는 jQuery UI를 사용하지 않을 것이다).

$(".container").droppable({ 
    // accept draggables only from #toolbox, 
    // this will prevent cloning of the draggables(inside drop event handler), 
    // that already have been dropped inside #container 
    accept: "#contain .drag", 
    drop: function (event, ui) { 
    // when a draggable is dropped: 
    // 1: clone it's helper 
    // 2: Make the helper draggable 
    // 3: set containment to #container 
    $(this).append($(ui.helper).clone().draggable({ 
     containment: "parent" 
    })); 
    } 
}); 
$("#contain .drag").draggable({ 
    revert: "invalid", 
    helper: "clone" 
}); 

편집 : 더 나은 마크 업과 함께 새로운 피들을 추가했습니다. 추신 : 감사합니다. @Scott

Answer 1

삭제 된 요소의 상태를 살펴본 다음 jQuery를 사용하여 두 번째 상자의 요소 상태와 일치되게했습니다.

먼저 style 클래스를 추가 한 다음 draggable 클래스를 제거했습니다. 그러나 jQuery도 절대 위치 지정을 사용했기 때문에 요소에서 제거해야했습니다.

요소는 display: block이므로 왼쪽에서 오른쪽으로 겹쳐 쓰지 않습니다.

https://jsfiddle.net/p1fwf4L7/3/