Question

我在我的页面上有一个可拖动的div，然后是一个可放置td的大桌子。我希望突出显示＆amp; tt＆＃34;触摸＆＃34;只有可拖动div的某一部分。

希望这个小提琴更清晰：https://jsfiddle.net/mattlokk/e2nyxqhv/10/

（满足过帐要求的小提琴代码：）

HTML

<table id='tblDropArea'>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
</table>
<div id='divDraggable' style='width: 80px; height: 160px; background-color: #ff0; border: 1px solid #ccc;'>
</div>

的CSS

*{
  margin: 0px;
  padding: 0px;
}
#tblDropArea{
    border-collapse: collapse;  
}
#tblDropArea tr td {
  width: 85px;
  border: 1px solid #bbb;
  height: 45px;  
}
.drop-hover{
  background-color: #ccc;
}

JS

$("#divDraggable").draggable({
  appendTo: 'body',
  helper: 'clone',
    start: function(event, ui){
    $(this).hide();
    $(ui.helper).append("<div class='divEventDropPortion' style='position: absolute; left: 50%; top: 20px; width: 0px; height: calc(100% - 40px); border: 1px solid #000;' ></div>")
  },
  stop: function () { $(this).show(); }
});

$("#tblDropArea tr td").droppable({
    accept: ".divEventDropPortion",
  hoverClass: "drop-hover",
  tolerance: "touch",
  drop: function (event, ui) {
  }
});

当你拿起黄色div时，它的中间会出现一条黑色的垂直线。我只希望突出显示触摸该行的可放置td＆＃39;

如何定义JqueryUI可拖动的特定区域，可以触摸＆＃34;一个JqueryUI droppable

0 个答案: