Question

所以我有以下结构：

<td class=\"dropbears\">
<div class=\"thingtodrag\" style=\"display:block; width:100px;\"></div>
</td>

我还有很多其他tds都是空的，但是有空间。我有一个可拖放的声明：

$(".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可拖动。任何想法将不胜感激。

Answer 1

您要拖动<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>

这只是代码中的语法错误。

我在将div拖到TD时遇到麻烦

1 个答案: