jQuery UI 从可排序到自由拖动
jQuery UI from sortable to free drag around
我是 jQuery UI 的新手。
我需要有一个列表(可排序),我可以从中将元素拖到另一个 div。在那个 div 中,元素需要具有特定的宽度和高度。该元素还需要限制在 div 或列表中拖动。我已经尝试了一些东西并使 documentation 变红,但我无法弄清楚 jet.
这是我试过的:
- JQuery UI - Drag from Sortable to Droppable
- http://jsfiddle.net/LVtwD/
- Drag from sortable to droppable?
- http://jqueryui.com/draggable/#sortable
我目前的代码如下:
js:
$(function() {
$('#available').sortable();
$('#available').disableSelection();
$('#used').droppable({
accept: '#available li',
drop: function (ev, ui) {
$("<div></div>").html(ui.draggable.html()).appendTo(this);
}
});
});
HTML:
<table>
<tr>
<td>
<ul id="available">
<li style="width: 45px; height: 20px; background: #a0d3e8; border: 1px solid #74bfdd;"><a href="#">Test</a></li>
</ul>
</td>
<td>
<div id="used" style="width: 400px; height: 500px; border:1px solid #222;"></div>
</td>
</tr>
</table>
我知道我可以通过以下方式限制 div 在 div 内的移动:
containment: "parent"
我有内联的原因 CSS 是因为宽度和高度的这些值是可变的。
我遇到的问题如下。当列表中的元素被拖动到 div 时,它被添加为列表项而不是 div。宽度和高度也完全消失。
希望有人能帮助我。提前致谢。
这就是我的想法。
$(function() {
$('#available').sortable();
$('#available').disableSelection();
$('.draggable').draggable({ containment: '#used' });
});
我是 jQuery UI 的新手。 我需要有一个列表(可排序),我可以从中将元素拖到另一个 div。在那个 div 中,元素需要具有特定的宽度和高度。该元素还需要限制在 div 或列表中拖动。我已经尝试了一些东西并使 documentation 变红,但我无法弄清楚 jet.
这是我试过的:
- JQuery UI - Drag from Sortable to Droppable
- http://jsfiddle.net/LVtwD/
- Drag from sortable to droppable?
- http://jqueryui.com/draggable/#sortable
我目前的代码如下: js:
$(function() {
$('#available').sortable();
$('#available').disableSelection();
$('#used').droppable({
accept: '#available li',
drop: function (ev, ui) {
$("<div></div>").html(ui.draggable.html()).appendTo(this);
}
});
});
HTML:
<table>
<tr>
<td>
<ul id="available">
<li style="width: 45px; height: 20px; background: #a0d3e8; border: 1px solid #74bfdd;"><a href="#">Test</a></li>
</ul>
</td>
<td>
<div id="used" style="width: 400px; height: 500px; border:1px solid #222;"></div>
</td>
</tr>
</table>
我知道我可以通过以下方式限制 div 在 div 内的移动:
containment: "parent"
我有内联的原因 CSS 是因为宽度和高度的这些值是可变的。
我遇到的问题如下。当列表中的元素被拖动到 div 时,它被添加为列表项而不是 div。宽度和高度也完全消失。
希望有人能帮助我。提前致谢。
这就是我的想法。
$(function() {
$('#available').sortable();
$('#available').disableSelection();
$('.draggable').draggable({ containment: '#used' });
});