jQuery 可拖动/可放置问题
我一直在尝试实现一些简单的可拖动/可放置代码（下面的链接），但没有成功。这些物品会被拖拽、恢复并保持在收容状态。但是，当将项目放入可放置区域时，该项目会按其应有的方式发出警报，但随后就不再可拖动。
理想情况下，我希望项目可以在拖放区域之间拖动。以防万一用户将其移动到可放置区域然后改变主意。一旦进入可投放区域，我还希望允许该物品在其中移动。
我是否忽略了一些显而易见的事情？我搜索到的所有内容看起来都非常基本且易于实施。
我一直在寻找并尝试一些东西，但没有任何运气。
<div class="build_board_text" id="build_board_text">
<div id="src_landscape_8-5x11">
<div id="draggable_1" class="draggable_item">
<br />Text 1.
</div>
<div id="draggable_2" class="draggable_item">
<br />Text 2.
</div>
</div><!-- source list -->
<div id="dst_landscape_8-5x11"> </div><!-- destination list -->
</div
$(function() {
$('div', $('#src_landscape_8-5x11')).draggable({
revert: 'invalid',
containment: '#build_board_text'
});
$('#dst_landscape_8-5x11').droppable({
accept: '#src_landscape_8-5x11 > div',
drop: function() {
alert('Dropped!');
}
});
$('#src_landscape_8-5x11').droppable({
accept: '#dst_landscape_8-5x11 div',
drop: function() {
alert('Dropped back!');
}
});
});
I've been trying to implement some simple draggable / droppable code (link below) with no success. The items drag, revert and stay in containment. However, when dropped in the droppable area the item gives the alert, as it should, but it is then no longer draggable.
Ideally, I would like to have the item draggable between the drag and drop areas. Just in case the user moves it to the droppable area and then changes their mind. Once in the droppable area, I would like to also allow the item to be movable in there.
Am I overlooking something obvious? Everything I found searching looked like it was pretty basic and straightforward to implement.
I've been searching and trying a few things, but haven't had any luck.
<div class="build_board_text" id="build_board_text">
<div id="src_landscape_8-5x11">
<div id="draggable_1" class="draggable_item">
<br />Text 1.
</div>
<div id="draggable_2" class="draggable_item">
<br />Text 2.
</div>
</div><!-- source list -->
<div id="dst_landscape_8-5x11"> </div><!-- destination list -->
</div
$(function() {
$('div', $('#src_landscape_8-5x11')).draggable({
revert: 'invalid',
containment: '#build_board_text'
});
$('#dst_landscape_8-5x11').droppable({
accept: '#src_landscape_8-5x11 > div',
drop: function() {
alert('Dropped!');
}
});
$('#src_landscape_8-5x11').droppable({
accept: '#dst_landscape_8-5x11 div',
drop: function() {
alert('Dropped back!');
}
});
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
不完全确定原因，但如果您从
#dst_landscape_8-5x11中删除position:relative，那么它就可以工作。编辑：此外，更改第二个源以匹配第一个源：
这些项目源自 src_... ，因此它们始终被认为是其中的一部分。
Not entirely sure why, but if you remove
position:relativefrom#dst_landscape_8-5x11then it works.EDIT: Also, change your source on the 2nd one to match the first:
The items originate in
src_...so they are always considered to be part of that it seems.