jQuery可拖拽/放置问题

Question

jQuery可拖拽/放置问题

3

我可以轻松拖动项目，但不幸的是，项目可以被拖到任何地方，这不是我想要的。我只想让项目在一些特定区域内拖动，比如按钮菜单。我尝试了许多方法，但都没有得到结果。请问如何禁用ID为34的按钮菜单以防止在那里放置按钮？您可以看到我正在使用的代码（对于不掉落的情况无效）。

最好的问候，

Altaico

以下是代码：

$("#35").draggable();
$("myArticle").droppable( "option", "disabled", true );

- alper

2个回答

0

查看您的可放置元素的accept选项 - 这允许您指定拖动元素在进行放置操作之前必须具有哪些类，或者您可以使用函数根据其他标准做出此决定。

- belugabob

我只能拖动我的按钮，但是在使用这段代码后，我无法将其放置在任何地方。如果您能帮助我解决这个问题，我将非常感激。干杯。Altaico[代码] $().ready(function() { $("#technologyBtn").draggable({revert: "invalid"}); $("#myArticle").droppable( "option", "disabled",false ); $("#techBtnMenu").droppable( "option", "disabled", false ); alert("end"); }); [/代码] - alper

当你说你不能放下它时，你期望在松开鼠标按钮时看到什么行为？ - belugabob

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JonNeale · Accepted Answer

您希望在可拖动对象上设置revert: invalid选项，这将导致它在被放置到未标记为可放置的任何地方时自动回弹。因此，请尝试以下代码：

$("#35").draggable({revert: "invalid"}));
$("myArticle").droppable( "option", "disabled", true );
$("#36").droppable( "option", "disabled", false );

这意味着您可以将35拖放到36，但不能将其拖放到myarticle上。

以下是完整的页面HTML：

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
</head>    
<body>
  <script type="text/javascript">
    $().ready(function() {
      $("#35").draggable({revert: "invalid"});
      $("#36").droppable({disabled: false });
    });
  </script>
  <div id="34" style="width:100px; height:100px; background-color:red;"> 
    </div>
  <div id="35" style="width:100px; height:100px; background-color:yellow;" >
     </div>
  <div id="36" style="width:300px; height:300px; border:solid blue 1px;">
    drop me here
  </div>
</body>

这将呈现两个有颜色的块（divs）。您可以拖动黄色的那个（id为35），只能将其放置在标有“把我放在这里”的正方形中。如果您想在其他地方放置它，您必须使用droppable装饰该区域。希望这可以帮助你。