关于javascript:在拖动时,如何使可拖动的可排序列表显示其他内容?

How do I make a draggable, sortable list display something else while it's dragging?

我一直在用jQuery ui处理可排序列表,并且不确定如何在拖动进行排序时将要拖动的元素临时调整为通用的元素。

如果要排序的元素很大,则拖动大元素会很尴尬。这样一来,您可以轻松查看是否拖动的是表示"列表项"较小的某种文本。

示例代码:
HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Sortable List 1
<ul class="sortableList">
    <li class="ui-state-default large-box">Item 1
</li>

    <li class="ui-state-default large-box">Item 2
</li>

    <li class="ui-state-default large-box">Item 3
</li>

    <li class="ui-state-default large-box">Item 4
</li>

    <li class="ui-state-default large-box">Item 5
</li>


</ul>

CSS:

1
2
3
4
.large-box
{
  height:100px;
}

JS:

1
2
3
4
5
6
$(document).ready(function () {
    $(".sortableList").sortable({
        revert: true,
        placeholder: 'sortable-placeholder',
    });
});

https://jsfiddle.net/0jqwapg7/

请注意,框的尺寸非常大,因此拖动时很难看清。我想在拖动时临时使用通用的较小元素(例如,只有25px高的文本元素,上面写着"列表项"),这样更易??于查看,然后放到适当位置时再使用普通元素。

我该怎么做?


看看是否有帮助,添加新类以使元素在拖动时变小,并在拖动完成后删除该类

jsfiddle也在这里,例如https://jsfiddle.net/cfw5j1nz/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function () {
    $(".sortableList").sortable({
        revert: true,
        placeholder: 'sortable-placeholder',
        /*update: function (event, ui) {
            // Some code to prevent duplicates
        }*/


        start: function( event, ui ) {
 /*         $(ui.item).removeClass("large-box"); */
            $(ui.item).addClass("small-box");
            },
       stop:function( event, ui ) {
/*          $(ui.item).addClass("large-box"); */
            $(ui.item).removeClass("small-box");

    }
    });
});

答案是为helper设置一个函数,理想情况下将其与占位符结合使用。

JS:

1
2
3
4
5
$(".sortableList").sortable({
    revert: true,
    helper: function(e, ui) { return $("List Item"); },
    placeholder: 'sortable-placeholder'
});

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.large-box
{
  height:100px;
}

.helper
{
  font-weight:bold;
  color:#333;
  vertical-align:middle;
}

.sortable-placeholder
{
  height: 25px;
    width: 100%;
    background-color: yellow;
}

https://jsfiddle.net/tq2c0f7w/


1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function () {
    $(".sortableList").sortable({
        revert: true,
        placeholder:"sortable-placeholder",
        start: function (event, ui) {
          ui.item.toggleClass("sortable-placeholder");
        },
        stop: function (event, ui) {
          ui.item.toggleClass("sortable-placeholder");
        }
    });
});

您需要设置开始和停止事件,并为占位符创建一个css

1
2
3
4
5
.sortable-placeholder {
  height: 100px;
  width: 100%;
  background-color: grey;
}