gpt4 book ai didi

javascript - 我对使用 jquery 的 droppable 有疑问

转载 作者:太空宇宙 更新时间:2023-11-04 16:20:36 27 4
gpt4 key购买 nike

我可以拖动内容,但无法将内容拖放到 td 中。请帮帮我。如果将列表中的内容拖放到 td 中,则不会出现 dropped alert。

我的jquery:

$(".items").draggable({helper: 'clone'});     
$(".droparea").droppable({
accept: '.items',
drop: function(){
alert('dropped')

}

});

此处从列表中拖动内容。

<div class="listOfTeacher fl">
<ul>
<li class="items" id="1">Teacher1</li>
<li class="items" id="2">Teacher2</li>
<li class="items" id="3">Teacher3</li>
<li class="items" id="4">Teacher4</li>
</ul>
</div>

这里我要把内容丢进td

<table border="0" width="400" id="table" style="">
<tbody>
<tr id="aa">
<td class="droparea br">&nbsp;</td>
<td class="droparea br">&nbsp;</td>
<td class="droparea br">&nbsp;</td>
<td class="droparea br">&nbsp;</td>
<td class="droparea br">&nbsp;</td>
</tr>
</tbody></table>

最佳答案

您的代码对我有用。您确定已加载 jquery.droppable 库吗? Table border = 0 也有效。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$().ready(function() {
$(".items").draggable({helper: 'clone'});
$(".droparea").droppable({
accept: '.items',
drop: function(){
alert('dropped')
}
});
});
</script>
</head>
<body>

<div class="listOfTeacher fl">
<ul>
<li class="items" id="1">Teacher1</li>
<li class="items" id="2">Teacher2</li>
<li class="items" id="3">Teacher3</li>
<li class="items" id="4">Teacher4</li>
</ul>
</div>

<table border="1" width="400" id="table" style="">
<tbody>
<tr id="aa">
<td class="droparea br">&nbsp;</td>
<td class="droparea br">&nbsp;</td>
<td class="droparea br">&nbsp;</td>
<td class="droparea br">&nbsp;</td>
<td class="droparea br">&nbsp;</td>
</tr>
</tbody></table>

</body>
</html>

关于javascript - 我对使用 jquery 的 droppable 有疑问,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6661741/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com