jQuery 可排序的下拉链接

Question

我在删除时遇到了可排序元素的问题。我将其设置为具有充当链接的图像，它覆盖了整个可排序区域。基本上，您可以对图像进行排序和排列，单击它们打开链接，或将它们拖到放置区以将其删除。

我主要有这个工作，除了在 Firefox 中，链接在放置元素时打开（仅在放置区域中）。我在 Internet Explorer (8) 和 Chrome 中都没有这个问题。

这里有一些代码sn-ps：

$(document).ready(function () {
    $('.Droppable').droppable({
        drop: function (event, ui) {
            $(ui.draggable).remove();
        }
    });
    $("#ElementsArea").sortable();
});

<ul id="ElementsArea">
<li id="1" value="google" class="ui-state-default"><a href="http://www.google.com" target="_blank"><img src="Images/placeholderblack.png" /></a></li>
<li id="2" value="yahoo" class="ui-state-default"><a href="http://www.yahoo.com" target="_blank"><img src="Images/placeholderyellow.png" /></a></li>
<li id="3" value="bing" class="ui-state-default"><a href="http://www.bing.com" target="_blank"><img src="Images/placeholderblack.png" /></a></li>
<li id="4" value="nhl" class="ui-state-default"><a href="http://www.nhl.com" target="_blank"><img src="Images/placeholderyellow.png" /></a></li>
<li id="5" value="mlb" class="ui-state-default"><a href="http://www.mlb.com" target="_blank"><img src="Images/placeholderblack.png" /></a></li>
<li id="6" value="nfl" class="ui-state-default"><a href="http://www.nfl.com" target="_blank"><img src="Images/placeholderyellow.png" /></a></li>
<li id="7" value="tsn" class="ui-state-default"><a href="http://www.tsn.ca" target="_blank"><img src="Images/placeholderblack.png" /></a></li>

和 CSS（不是很重要，但我想我会添加它）：

#ElementsArea
{
    width: 500px;
    height: 800px;
    display: block;
    border: 1px solid black;
    list-style-type: none; 
    margin: 0; 
    padding: 0;
    float: left;
}

#ElementsArea li
{
    margin: 3px 3px 3px 0; 
    padding: 1px; 
    float: left; 
    width: 125px; 
    height: 125px; 
    text-align: center;
}

.Droppable
{
    margin: 3px 3px 3px 0; 
    padding: 1px; 
    float: left; 
    width: 125px; 
    height: 125px; 
    text-align: center;
}

Answer 1

我可以确认，在 Firefox 中，它会在放入拖放区后打开链接（使用您的代码）。 Example.

如果您在可排序中使用对象的克隆，则可以解决此问题。 Working example.

$("#ElementsArea").sortable({helper: 'clone'});