所以我有以下结构：
<td class=\"dropbears\">
<div class=\"thingtodrag\" style=\"display:block; width:100px;\"></div>
</td>
我有一堆其他的 td，它们是空的但有空间。我有一个可拖动和可放置的声明：
$(".thingtodrag").draggable();
$(".dropbears").droppable({
accept:"thingtodrag",
drop: function(e, ui) {
ui.draggable.appendTo($(this).css({
top: "0.2em",
left: "0.2em"
}));
}
});
但是，无论我做什么，我都无法单击 div 来拖动它（它没有响应）。如果我使 td 可拖动，则可以拖动它，但是我最终会在 tds 中出现 tds 并且将项目放置在正确的位置时出现问题，所以我真的希望使 div 可拖动。任何想法将不胜感激。
你要拖<div>！
$(document).ready(function(){
$('.event').on("dragstart", function (event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('table td').on("dragenter dragover drop", function (event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
if($(this).find('span').length===0){
de=$('#'+data).detach();
de.appendTo($(this));
}
};
});
})table th,table td{
height: 30px;
width: 200px;
}
table div{
display:block;
background-color: #17A7C6;
height: 100%;
width: 100%;
cursor: move;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
<tr>
<td><div class="event" id="a" draggable="true">AAA</div></td>
<td><div class="event" id="b" draggable="true">BBB</div></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>这只是代码中的语法错误。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句