我刚刚开始这方面的工作,但我想知道如何才能采用下面这个非常简单的示例并进行修改,以便如果可拖动的div已经放在可放的div上,它就不会触发警报。
<script type="text/javascript">
$(function () {
$("#draggable-1").draggable();
$("#draggable-2").draggable();
$("#droppable").droppable({
drop: function (event, ui) {
var currentId = $(ui.draggable).attr('id');
if (currentId == "draggable-1") {
$(this)
// would like to prevent this if draggable is already dropped!
alert("Adding Item #1.")
} else {
$(this)
alert("Adding Item #2.")
}
}
});
});
</script>
<table width="100%"><tr><th>Draggable</th><th>Order Section</th><tr><td>
<div id="draggable-1">
<p>Item #1</p>
</div>
<div id="draggable-2">
<p>Item #2.</p>
</div>
<div id="droppable">
<p>Add Your Item</p>
</div>发布于 2012-07-17 04:45:09
一个对我有效的解决方案是:
var wasInDrop = false;
var finishInDrop = false;
$("#draggable_1").draggable({
start: function(event, ui){
if (! finishInDrop){
wasInDrop = false;
}
finishInDrop = false; //will be set to true if landing in drop.
},
stop: function(event, ui){
if (finishInDrop && !wasInDrop){
alert("Adding Item #1.");
}
if (finishInDrop){ wasInDrop=true;}
}
});
$("#droppable").droppable({
drop: function (event, ui) {
$(this)
var currentId = $(ui.draggable).attr('id');
if (currentId == "draggable_1") {
finishInDrop = true; //for this time.
}
});以此类推。我们的想法是,在以下情况下,可拖动对象会触发警报:
发布于 2012-07-17 06:47:52
检查这个小提琴:http://jsfiddle.net/100thGear/XfUvS/
位置有一点错误,但达到了预期的效果。如果这有帮助,请告诉我!
https://stackoverflow.com/questions/11511434
复制相似问题