防止可拖动项目落在特定元素上答案

【问题标题】：Prevent draggable item to be drop over specific element防止可拖动项目落在特定元素上
【发布时间】：2017-02-14 10:11:08
【问题描述】：

我创建了多个可拖动的热点，但我的问题是在同一个容器中只有一个部分；在该部分中，我不想删除可拖动元素。请检查下面的sn-p。

$(".draggable").draggable({
  containment: ".container",
 
});

.container{
  width:100%;
  position:relative;
  height:300px;
  background:#eaeaea;
}
label{display:inline-block;}
.draggable {
    position: absolute!important;
    min-width: 85px;
    border: none!important;
    background: transparent!important;
    top:0;
    left:0;
    z-index:1;
}
.draggable label:first-child{
  background:blue;
  border:1px solid green;
  width:10px;
  height:10px;
  border-radius:50%;
  float:left;
  margin-top:3px;
  margin-right:10px;
}

.draggable label:last-child {
    overflow: hidden;
    max-width: 100px;
    word-wrap: break-word;
    padding: 5px;
    background: #9afff1;
}

.section {
    position: absolute;
    width: 240px;
    height: 100px;
    background: #dfbaba;
    bottom: 0;
    border: 1px solid #d5a1a1;
}

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="container">
  <div class="draggable">
    <label></label>
    <label>hotspot1</label>
  </div>
  <div class="draggable">
    <label></label>
    <label>hotspot2</label>
  </div>
  <div class="draggable">
    <label></label>
    <label>hotspot3</label>
  </div>
  
  <div class="section">
  </div>
</div>

在上面的 sn-p 热点可以放在红色背景部分。如何防止这种情况？请检查下图以获得更好的理解。

同样在 drop 上如何检查两个热点是否重叠？如果两个热点相互重叠，那么我想更改将改变热点方向的类。谢谢

【问题讨论】：

标签： jquery html jquery-ui drag-and-drop

【解决方案1】：

无需任何插件即可实现此目的

$(document).ready(function(){

    $(".draggable").draggable({
      containment: ".container" ,             
      stop: function(event,ui ) {                             
        if($(this).draggable('option','revert'))
            $(this).draggable('option','revert', false );           
          },
    });
    //this will prevent any collision
       $(".draggable" ).droppable({
            drop: function( event, ui ) {
            ui.draggable.draggable( 'option', 'revert', true );                     
            }
          });       
       // this will prevent drop on section     
       $( ".section" ).droppable({
              drop: function( event, ui ) {       
            ui.draggable.draggable( 'option', 'revert', true );         
              }
        });    

});

【讨论】：

我已经实现了您建议的代码，它工作正常，唯一的问题是部分可拖动元素重叠的某些部分，然后它不会恢复。请检查小提琴fiddle.jshell.net/2hvcjvf3/2
谢谢，但这对我来说不是问题。请查看图片了解s24.postimg.org/c12wbc6qd/Capture.png
在上面的图像元素中，即使它的某些部分在部分中，也不会恢复
虽然这不是一个优雅的解决方案，但解决方法是将此部分放在具有稍大宽度和高度属性的父 div 中，然后将其放入可放置检查中。也许一些 CSS 也可以帮助我们。
请检查我的意思，尽管您需要稍微调整一下fiddle.jshell.net/2hvcjvf3/5

【解决方案2】：

你应该使用一个额外的插件来preventCollision 与兄弟姐妹

看这里>https://github.com/dsbaars/jq-ui-draggable-collision

或在这里>https://sourceforge.net/projects/jquidragcollide/

你的最终代码是

$(".draggable").draggable({
    containment: ".container",
    obstacle: ".section",
    preventCollision:true


});

在 SO 上查看有关此主题的更多信息 > Restrict jQuery draggable items from overlapping/colliding with sibling elements

希望对你有帮助。

【讨论】：

感谢您的解决方案。我会试试这个。 :)
如果有帮助请告诉我
请告诉我它将与 jquery-ui-1.12.1.min.js 一起使用吗？实施时出现错误“无法读取未定义的属性'选项'”
检查第一个链接中的安装指南复制 jquery-ui-draggable-collision.js 或 jquery-ui-draggable-collision(-xxx)(.min).js 的任何特定或缩小版本进入您的 javascript 目录确保 jquery 1.10.1 或更高版本可访问确保 jqueryui 10.4 或更高版本可访问确保 jquery-collision 1.0.1 或更高版本可访问
是的，我也在尝试。我不知道我的安装出了什么问题。感谢您的帮助。

【解决方案3】：

您可以尝试停止检查可拖动位置是否超出限制区域，如果是 - 将恢复设置为 true，然后在开始时再次设置为 false

【讨论】：