Question

我希望在将项目拖放到可放置容器中时显示一个占位符，就像JQuery Sortable中显示的占位符一样。

我们在JQuery中有一个占位符选项可排序。在JQuery draggable方法中是否有类似的东西，或者无论如何我能做到这一点。

任何建议都会有所帮助。

Answer 1

尝试以下代码，

如你所说，“容器将有很多元素”。我假设这些容器将有'div'元素。

$("#container_drop div").droppable({
    drop: function (event, ui) {
        $( this ).addClass( "ui-state-highlight" );
    },
    over: function (event, ui) {
        $( this ).addClass( "ui-state-highlight" );
    },
    out: function (event, ui) {
        $( this ).removeClass( "ui-state-highlight" );
    }
});

Answer 2

尝试使用吹码，

$( "#container_drag" ).draggable({

      drag: function() {
        $('#container_drop').addClass('highlight_container');
      },
      stop: function() {
        $('#container_drop').removeClass('highlight_container');
      }

});

其中，container_drag - 您的可拖动容器和container_drop - 将丢弃项目的位置。

在Css，

.highlight_container{border:...,background:...}

Answer 3

假设您的父元素有ID，这里有一些代码来自我在工作中为我工作的最近项目：

$('#container').draggable({
    start: function(event, ui) {
        $('#' + ui.helper.context.id).addClass('active');
    },
    stop: function(event, ui) {
        $('#' + ui.helper.context.id).removeClass('active');
    }
})

即使没有身份证，你也可以让它发挥作用。希望这会有所帮助：）

Jquery Draggable占位符

3 个答案: