У меня проблемы с перетаскиванием div внутри TD

Question

Итак, у меня следующая структура:

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

У меня есть куча других тд, которые пусты, но имеют место. И у меня есть объявление о перетаскиваемости и сбрасывания:

$(".thingtodrag").draggable();
$(".dropbears").droppable({
    accept:"thingtodrag",
    drop: function(e, ui) {
      ui.draggable.appendTo($(this).css({
        top: "0.2em",
        left: "0.2em"
      }));
    }
});

Независимо от того, что я делаю, я не могу нажать на div, чтобы перетащить его (он не отвечает). Если я сделаю тэг перетаскиваемым, его можно будет перетаскивать, но потом я получаю тдс внутри тдс и возникают проблемы с перетаскиванием элемента в нужное место, поэтому я действительно надеюсь сделать 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>

Это была просто синтаксическая ошибка в коде.