Question

我正在使用JQuery从一个列表中拖动项目并将其拖放到另一个列表中。

项目一旦被删除，它就会从原始列表中删除并附加到目标列表中。

我已经使用了下面的代码，它在检查DOM时似乎表现得非常好，但它在页面上显示不正确。通常在列表之外和右上角。

我的第一个猜测是这是一个CSS问题，但是即使在删除所有样式表后问题仍然存在。

Chrome检查器中的仔细检查显示每个列表项都添加了内联样式。我不确定它的来源。

这是我的代码。

        $(function() {

    $( ".drag" ).draggable();

    $( ".drop" ).each(function (index){

        var title = $(this).attr('title');

        $(this).droppable({      
           accept:  title,
           activeClass: "ui-state-hover",
           hoverClass: "ui-state-active",
           drop: function( event, ui ) {

           ui.draggable.remove();
           $(this).append(ui.draggable);
           }
          }); 
    });
 });
</script>




<ul>
<li class="drag RED">RED</li>
<li class="drag BLUE">BLUE</li>
</ul>

<ul class="drop" title=".RED">
<li>Stuff</li>  
</ul>

<ul class="drop" title=".BLUE">
<li>Stuff</li>      
</ul>

Answer 1

您的意思是风格，如

position: relative; left: 151px; top: 32px;

如果是这样，这是来自jquery UI插件，它告诉你的droped元素相对于父元素的位置。

Answer 2

在使用一些基本的HTML和Draggable jQuery库时，我遇到了这种情况。单击here以获取JSFiddle复制问题。

我只能通过简单地利用jQuery的css（）函数手动将值设置为零来解决这个问题。 e.g。

$(ui.draggable).css({'left': '0', 'top': '0'});

我感谢你问为什么哪个是一个很好的问题而且我无法回答，但我认为帮助任何到达此页面的人都有同样的问题是值得的。

为什么JQuery在我的附加列表项中添加样式？

2 个答案: