Jquery 可拖动占位符答案

【问题标题】：Jquery Draggable PlaceholderJquery 可拖动占位符
【发布时间】：2013-06-05 17:33:52
【问题描述】：

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

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

任何建议都会有所帮助。

【问题讨论】：

嗨 raja，在拖动过程中您需要任何可拖动项目的荧光笔吗？
@sathish 我需要突出显示要放置物品的位置。
您找到任何结果了吗？我需要类似的东西......

标签： jquery draggable jquery-ui-draggable

【解决方案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" );
    }
});

【讨论】：

@sathish 感谢您的建议，我已经在可拖动方法的拖动选项中做同样的事情。它没有按预期工作。让我尝试更改一些 css，因为突出显示在某个地方，但该项目被丢弃在其他位置
@Raja 有一个可用于 droppable 的参数“hoverClass”..你也可以试试这个..
@Raja 上面的方法是用于droppable而不是draggable。
我在可拖动中使用了类似的方法。我只是想让它更简单，就像可排序的占位符一样。所以我环顾四周。

【解决方案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:...}

【讨论】：

@sathish 感谢您的建议，但从上面的代码中，整个容器将被突出显示，而不是要删除项目的特定点。容器将包含许多元素，我可能会放在元素之间

【解决方案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，您也可以使用它。希望这会有所帮助:)

【讨论】：