Jquery 可拖动占位符

Posted 2023-05-08

【中文标题】Jquery 可拖动占位符

【英文标题】：Jquery Draggable Placeholder

【发布时间】：2013-06-05 17:33:52

【问题描述】：

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

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

任何建议都会有所帮助。

【问题讨论】：

嗨 raja，在拖动过程中您需要任何可拖动项目的荧光笔吗？

@sathish 我需要突出显示要放置物品的位置。

您找到任何结果了吗？我需要类似的东西......

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