css - jquery ui：拖放 - 鼠标选择不正确

Question

我正在为我的客户进行拖放导航设置。

我有拖放工作（以基本形式），但是当您单击要拖动的列表项之一时，实际的可放置框会出现在不同的位置。

如果不向您展示一些东西就很难解释，所以我在网上有它：http: //jsfiddle.net/elogicmedia/nVPYQ/7/

LI 和 A 标签的 CSS

li {
color: black;
list-style: none;
padding: 1em 1em;
}
a {
position: absolute;
text-decoration: none;
border: 0px solid black;
width:98px;
height:98px;
border-radius:50%;
line-height:1.5em;
text-align:center;
    font-family: helvetica, arial;
    background-color: #C0D9D9;
}

JS 拖拽代码

// let the gallery items be draggable
$( "li" ).draggable({
  revert: "invalid", // when not dropped, the item will revert back to its initial position
  containment: "document",
  helper: "clone",
  cursor: "move"
});  

// let the trash be droppable, accepting the gallery items
$( "#droparea" ).droppable({
  accept: "ul.gallery > li",
  activeClass: "ui-state-highlight",
  drop: function( event, ui ) {
      alert('dropped');
    //deleteImage( ui.draggable );
  }
});

还要注意小提琴右侧的边界，有些东西也不在那里。他们不应该在那里，只有圆圈。下面是我的 jsfiddle 设置的屏幕截图。

谢谢

Answer 1

我最终自己解决了这个问题。

工作结果在这里：

http://jsfiddle.net/elogicmedia/nVPYQ/12/

我试图删除 LI 标签，但 A 标签是圆圈，右边的框是 LI 标签。

新的拖放代码

// let the gallery items be draggable
$( "ul.gallery > li a" ).draggable({
  revert: "invalid", // when not dropped, the item will revert back to its initial position
  containment: "document",
  helper: "clone",
  cursor: "move"
});  

// let the trash be droppable, accepting the gallery items
$( "#droparea" ).droppable({
  accept: "ul.gallery > li a",
  activeClass: "ui-state-highlight",
  drop: function( event, ui ) {
      alert('dropped');
    //deleteImage( ui.draggable );
  }
});