jquery로 드래그 가능으로 놓기

Question

드래그 가능한 div를 jquery로 이미 드래그 가능하고 삭제 가능한 div에 드롭 할 수 있습니까? 나는 이것을 달성 할 수 없다. 누군가가 실용적인 사례를 줄 수 있다면 정말 감사 할 것입니다.

감사합니다.

편집 내가 달성 할 수없는 것은 다른 div를 삭제할 수있는 div이며 분류 할 수 있습니다. 더욱이 이러한 떨어 뜨리고 정렬 가능한 div는 동시에 정렬 가능하고 삭제 가능한 div를 수용 할 수 있어야합니다.

편집 내가 작품을 만들려고 노력하고있어에 있습니다 :에 대해 어떻게 http://jsfiddle.net/QcbK8/

Answer 1

: threedub, jQuery를 기반으로.

Answer 2

요소가 드래그 가능하다고해서 그것이 삭제 될 수 없다는 것을 의미하지는 않습니다.

작은 예제를 작성했습니다. 매우 단순합니다. 요소의 절반 만 빨간색으로 표시되고 절반은 드롭 대상 및도 드래그 가능합니다.

데모 : http://jsfiddle.net/63kgz/1/

HTML :(몇 임의의 객체)

<div class="drag"><span>A</span></div> 
<div class="drag"><span>B</span></div> 
<div class="drag"><span>C</span></div> 
<br class="clear" /> 
<div class="drop"><span>D</span><p></p></div> 
<div class="drop"><span>E</span><p></p></div> 
<div class="drop"><span>F</span><p></p></div> 

CSS :은 (그냥 무작위로 객체를 표시 할 수있어,이 무시)

.drag { width: 100px; height: 100px; 
     float:left; margin-bottom: 10px; margin-right: 10px; 
     border:1px solid #f00; 
} 
.drop { width: 200px; height: 200px; 
     float:left; margin: 10px 10px 10px 10px; 
     border: 1px solid #000; 
} 
.drop p { width: auto; 
      color: #00f; 
      margin-left: 50%; margin-right: 50%; margin-top: 25%; margin-bottom: 25%; 
} 
.clear { clear: both; } 
div { 
    user-select: none; 
    -o-user-select:none; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
} 

jQuery를 :

// Everything is draggable 
$('.drag,.drop').draggable(); 

// Only the .drop class is droppable 
$('.drop').droppable({ 
    'accept': '.drag,.drop', 
    'drop' : function(event, ui) { 
     $(this).find('p').text(ui.draggable.find('span').text()); 
    } 
}); 

// This just makes the sizes different so the objects fit in each other 
$('.drag').css('width', function(i, value) { 
    return parseInt(value) * (1/(i + 1)) + 'px'; 
}).css('height', function(i, value) { 
    return parseInt(value) * (1/(i + 1)) + 'px'; 
}); 
$('.drop').css('width', function(i, value) { 
    return parseInt(value) * (1/(i + 1)) + 'px'; 
}).css('height', function(i, value) { 
    return parseInt(value) * (1/(i + 1)) + 'px'; 
});