jquery-ui sortable：如何更改拖動元素的DOM

我正在使用jquery-ui sortable，我想問如何更改拖動元素的DOM（需要添加圖標到元素是拖/排序）。所以jquery-ui sortable：如何更改拖動元素的DOM

$("#list").sortable({ 
    helper: function(event, ui){ 
     ... 
    } 
});

我使用在這種情況下helper財產，並根據文檔，ui是被排序的元素，但我要如何進入此對象的元素的HTML。謝謝

更新：我創建了一個小的jsfiddle http://jsfiddle.net/y6xtV/1/。我想要的是，當我開始重新排序時，拖動/重新排序的項目在其周圍有一個邊框，並在其中有一個小圖標。請幫助

來源

2013-06-03 Thang Pham

您是否希望幫助器中有邊框和圖像，或者被拖動的「原始」元素？

這是我想出來的。請參閱我所製作的jsfiddle。

$(function() { 
    $("#sortable").sortable({ 
     start: function (event, ui) { 
      ui.item.css('border', '1px solid red').append('<span class="ui-icon ui-icon-check icons"></span>'); 
     }, 
     stop: function (event, ui) { 
      //reset to no border or whatever your desired default border is 
      ui.item.css('border', ''); 
      ui.item.children('.icons').remove(); 
     } 
    }); 
    $("#sortable").disableSelection(); 
});

CSS

.icons { 
    display:inline-block; 
    position: absolute; 
    right: 0; 
} 
#helper { 
    border: 1px solid red; 
}

如果你想使用helper

//sortable 
helper: function (event, ui) { 
    return $('<div id="helper">I am the helper<span class="ui-icon ui-icon-check icons"></span></div>'); 
}

爲了測試輔助註釋掉start和stop，另一種方式註釋掉helper函數。我還添加了一個CSS主題來添加ui-icons。不知道你是否真的想要使用helper。有點混亂......但我的解決方案將邊框和圖像添加到拖動的項目。

文檔：

來源

2013-06-03 17:18:41 SirDerpington

非常感謝你。我有一個奇怪的行爲。所以，當我拖動/重新排序項目，在鉻上拖動/重新排序項目不是我的光標所在。它離我的光標右下約30px。這在IE9上不會發生。這讓我覺得這是一個CSS問題。我不能在小範圍內複製這個。你有任何理論或猜測？ –

很高興幫助！很難猜測。這是否只發生在Chrome或Firefox等？當你開始排序時，光標會跳躍嗎？它的行爲如何？一個解決方案（因爲我只能猜測你的問題）是「強制」遊標設置在[cursorAt]（http://api.jqueryui.com/sortable/#option-cursorAt）的指定位置。不漂亮，但我應該工作。 – SirDerpington

正如我所料，這是因爲css，一旦我刪除'-webkit-perspective'和'-webkit-transform-style'，一切都會恢復正常 –

jquery-ui sortable：如何更改拖動元素的DOM

回答

相關問題