这是我第一次尝试使用拖放控件,但我在弄清楚它是如何工作时遇到了问题。目前我有两个DIV,我想将元素从一个div移动到另一个div。使用draggable允许我将DIVS放置在我不想要的任何地方,我想限制元素可拖动的区域。
另一方面,我已经看过jquery UI示例,它们都与droppable元素交互,但我需要从draggable元素中获取id属性。这就是我到目前为止所做的,现在我不仅无法使div保持在他们应该的有限区域内,而且我也无法获得可拖动元素Id属性。
任何帮助将不胜感激。感谢。
$(function() {
$(".draggable").draggable();
$(".droppable").droppable({
drop: function(event, ui) {
var id, state;
state = $(this).attr("name");
id = $(this).closest(".droppable").attr("id");
alert("Element Id: " + id);
alert("Element New State: " + state);
}
});
});
这是一个更新的小提琴,显示我现在拥有的可拖动效果的错误。 http://jsfiddle.net/LPWhc/3/
$(function() {
$(".draggable").draggable({ revert: 'invalid'});
$(".droppable").droppable({
accept: '.draggable',
drop: function(event, ui) {
$(this).append($(ui.helper));
$(".draggable").addClass("item");
$(".item").removeAttr("style");
$(".item").draggable({
revert: 'invalid'
});
}
});
});
答案 0 :(得分:4)
<强> HTML:强>
<div name="list-a" class="droppable">
<h3>List A</h3>
<div class="task-wrapper">
<div class="draggable" id="1" name="1">
<a href="#">Element 1</a>
</div>
<div class="draggable" id="2" name="3">
<a href="#">Element 2</a>
</div>
<div class="draggable" id="3" name="3">
<a href="#">Element 3</a>
</div>
</div>
</div>
<div name="list-b" class="droppable">
<h3>List B</h3>
<div class="task-wrapper">
<div class="draggable" id="5" name="5">
<a href="#">Element 5</a>
</div>
<div class="draggable" id="6" name="6">
<a href="#">Element 6</a>
</div>
</div>
</div>
<强> jQuery的:强>
$(document).ready(function(){
$( ".draggable" ).draggable({
start: function( event, ui ) {
var id = $(this).closest(".draggable").attr('id');
}
});
$( ".droppable" ).droppable({
accept: '.draggable',
drop: function(event, ui){
var id = ui.draggable.attr("id");
alert(id);
}
});
});