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

Question

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

我有拖放工作（基本形式）但是当你点击其中一个要拖动的列表项时，实际的可投放框就会出现在不同的位置。

在没有向您展示的情况下解释是一件很难的事情，所以我在网上找到了它：http://jsfiddle.net/elogicmedia/nVPYQ/7/

李和CSS的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 DRAG AND DROPPABLE CODE

// 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 );
  }
});