用jquery拖放到一個可拖動的區域

Question

是否可以用一個可拖動的div區域拖放到一個已經可拖放的div和jquery中？我無法做到這一點。如果有人能舉一個實例，我將不勝感激。

感謝。

編輯 我無法實現的是一個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'; 
});