1

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

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

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

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

4

1 回答 1

3

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

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

文档：

于 2013-06-03T17:18:41.247 回答