1

ドロップ時にソート可能な要素に問題があります。リンクとして機能する画像を設定して、並べ替え可能な領域全体をカバーしています。基本的に、画像を並べ替えて並べ替えたり、クリックしてリンクを開いたり、ドロップ ゾーンにドラッグして削除したりできます。

私はこれをほとんど機能させていますが、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;
}
4

1 に答える 1

2

Firefox では、ドロップ ゾーンにドロップした後、(コードを使用して) リンクを開くことを確認できます。例。

これは、オブジェクトのクローンを sortable で使用すると修正できます。実施例。

$("#ElementsArea").sortable({helper: 'clone'});
于 2012-09-19T20:08:57.213 に答える