Question

是否可以使用jquery将可拖动的div放入已经可拖动且可放置的div中？我只是无法做到这一点。如果有人能提供一个有效的例子，我将不胜感激。

感谢。

修改我无法实现的是一个div，可以删除不同的div并对它们进行排序。此外，这些丢弃和可排序的div也应该同时能够容纳可排序和可丢弃的div。

修改我正在尝试做的工作是：http://jsfiddle.net/QcbK8/

Answer 1

如何：基于jQuery构建的threedub。

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';
});

与jquery一起陷入困境

2 个答案: