jquery - Jquery 可拖动占位符

Question

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

我们在 JQuery 可排序中有一个占位符选项。在 JQuery 可拖动方法中是否有类似的东西，或者无论如何我该怎么做。

任何建议都会有所帮助。

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');
    }
})

即使没有 ID，您也可以使用它。希望这可以帮助 ：）