jquery-ui sortable：如何改变拖动元素的DOM

Question

我正在使用jquery-ui sortable，我想问我如何更改拖动元素的DOM（需要为正在拖动/排序的元素添加图标）。所以

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

我在这种情况下使用helper属性，根据文档，ui是被排序的元素，但是我如何访问这个对象的元素的html。谢谢

更新：我创建了一个小的 jsfiddle http://jsfiddle.net/y6xtV/1/。我想要的是，当我开始重新排序时，拖动/重新排序的项目周围有一个边框，里面有一个小图标。请帮忙

Answer 1

你想让助手有一个边框和一个里面的图像还是被拖动的“原始”元素？

这是我想出的。请看我制作的jsfiddle。

JS

$(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。有点混乱......但我的解决方案将边框和图像添加到拖动的项目。

文档：

• start event
• stop event