Question

我正在使用jquery-ui sortable，我想问一下如何更改drag元素的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。有点令人困惑......但是我的解决方案将边框和图像添加到拖动的项目中。

文档：

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

1 个答案: