我正在开发一个具有UI的应用程序,用于映射字段(Source => Destination)。 这些字段将出现在UL中 - > LI - > DIV
这些列表将由PHP动态创建。
源字段可以使用revert拖动:true,其中Destination字段(droppable)将接受源字段。我知道接受:“#divsource”
我能够使许多div可拖动,但我的问题是如何将许多LI-> Div定义为可拖放。
然后,drop事件将调用ajax并且我也可以处理。
我是jQuery的新手,而且到目前为止,我所学到的任务都是我所知道的。但是,我的快速学习能力不是问题。
请帮助我们举一些例子。
感谢 Wikki
下面的代码是我一直在玩的东西。我知道它最终看起来有点远:
<script type="text/javascript">
$(document).ready(function(){
$('.srcfield').draggable({
revert: true,
helper: "clone"
});
$('#destinationfeilds').droppable({
accept : ".srcfield",
over: function(){
$(this).removeClass('out').addClass('over');
},
out: function(){
$(this).removeClass('over').addClass('out');
},
drop: function(ev, ui){
//var answer = confirm('Delete this item?');
var theTitle = $(ui.draggable).attr("title");
$(this).html("<u>"+theTitle+"</u><br/> is mapped!");
//$(this).removeClass('over').addClass('out');
//alert(theTitle);
}
});
});
</script>
</head>
<body>
<div id="destinationfeilds" class="out">
<span>Destination</span>
</div>
<div id="destinationfeilds" class="out">
<span>Destination</span>
</div>
<div id="sourcefields">
<div class="srcfield" title="First Name"><span>First Name</span></div>
<div class="srcfield" title="Last Name"><span>Last Name</span></div>
<div class="srcfield" title="Age"><span>Age</span></div>
</div>
</body>