Question

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

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

以下是一些代码段：

$(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

如果您在sortable中使用object克隆，则可以修复此问题。 Working example

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

drop上的jQuery可排序打开链接

1 个答案: