[英]jquery ui out: function not triggering
在jquery-ui文档中,它说出:当一个接受的draggable被拖出droppable时触发了函数。 但在我的情况下,我希望容器都可以拖动和放置。 此外,我希望id为droppable的div也可以排序。 现在拖放工作正常但是当我拖出其中一个项目时,out函数没有被触发,所以我该怎么做。
HTML
<div id="droppable" class="draggable droppable sortable">
</div>
<div id="draggable" class="droppable draggable sortable">
<p id="hello11" class="item">Hello1</p>
<p id="hello22" class="item">Hello2</p>
<p id="hello33" class="item">Hello3</p>
<p id="hello44" class="item">Hello4</p>
<p id="hello55" class="item">Hello5</p>
</div>
<div id="form-container">
<form method="post" action="">
<!-- Do stuff here -->
<input type="text" id ="hello1" name="xoxo1" value="">
<input type="text" id ="hello2" name="xoxo2" value="">
<input type="text" id ="hello3" name="xoxo3" value="">
<input type="text" id ="hello4" name="xoxo4" value="">
<input type="text" id ="hello5" name="xoxo5" value="">
</form>
</div>
的script.js
jQuery(document).ready(function($){
$( ".droppable" ).droppable({
accept: ".item"
});
$( "#droppable" ).droppable({
accept: ".item",
drop: function( event, ui ) {
// Set values
var myid = ui.draggable.attr("id").toString();
myid = myid.substring(0, myid.length - 1);
document.getElementById(myid).value = myid;
},
out: function(event,ui){
// Unset the values
var myid = ui.draggable.attr("id").toString();
myid = myid.substring(0, myid.length - 1);
document.getElementById(myid).value = '';
}
});
$( ".sortable" ).sortable();
$( ".draggable .item" ).draggable({
connectToSortable: ".sortable"
});
});
看起来你要做的是两个连接的可排序,它已经由sortable
小部件处理。 你有几乎相同的事件, drop
几乎相当于receive
, out
也可以。
目前还不完全清楚最终结果应该是什么,但这应该会给你一些想法:
$(".sortable").sortable({
connectWith: '.sortable',
receive: function (event, ui) {
// Set values
var myid = ui.item.attr("id").toString();
myid = myid.substring(0, myid.length - 1);
document.getElementById(myid).value = myid;
},
out: function (event, ui) {
// Unset the values
console.log('out')
var myid = ui.item.attr("id").toString();
myid = myid.substring(0, myid.length - 1);
document.getElementById(myid).value = myid;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.