Question

我想有顶级可放置区域，当用户开始将一些元素拖入此区域时，我想将其拆分到不同的部分（北，东，南和西等），并允许用户放弃在其中任何一个。

最好的方法是什么？

这是我尝试做的事情：

HTML

<div class='main_droppable_area'>
    <div class='drop_area north'></div>
    <div class='drop_area east'></div>
    <div class='drop_area south'></div>
    <div class='drop_area west'></div>
</div>
<div class='draggable_area'>
</div>

CSS

.main_droppable_area {
    top: 50px;
    left: 50px;
    right: 50px;
    height: 200px;
    border: 1px dashed blue;
    position: absolute;
}

.drop_area {
    position: absolute;
    border: 1px dashed blue;
    background-color: #eff;
    opacity: 0.5;
    filter: alpha(opacity=50);
    display: none;
}

.drop_area.active {
    opacity: 1;
    filter: alpha(opacity=100);
}

.drop_area.north {
    top: 0px;
    left: 0px;
    right: 0px;
    height: 50px;
}

.drop_area.south {
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 50px;
}

.drop_area.west {
    top: 50px;
    left: 0px;
    bottom: 50px;
    width: 50px;
}

.drop_area.east {
    top: 50px;
    right: 0px;
    bottom: 50px;
    width: 50px;
}

.draggable_area {
    position: absolute;
    top: 300px;
    left: 50px;
    background-color: blue;
    width: 50px;
    height: 50px;
}

的JavaScript

$(document).ready(function() {
    $( '.draggable_area' ).draggable();

    $('.main_droppable_area').droppable({
        accept: '.draggable_area',
        over: function() {
            console.log('main_droppable_area - over');
            $('.drop_area').show();
        },
        out: function() {
            console.log('main_droppable_area - out');
            $('.drop_area').hide();
        }
    });

    $('.drop_area').droppable({
        accept: '.draggable_area',
        over: function() {
            $(this).addClass('active');
            console.log('drop_area - over');
        },
        out: function() {
            $(this).removeClass('active');
            console.log('drop_area - out');
        }
    });
});

但不幸的是，这段代码并不是一直有效......例如，如果我尝试从主要可放置区域外拖动项目，它就不起作用。

但是，如果我将项目拖放到该区域并再次开始拖动它就可以了。

我的代码有问题吗？这是我的JSFiddle example

更新

感谢T J的解决方案......这里有JS fiddle的工作示例

Answer 1

如果使用display:none隐藏droppable，则该元素根本不会被渲染。因此，当有效的可拖动开始拖动时，它将无法激活，并且您所做的更改将不会发生，直到启动新的拖动激活 droppables。

一种解决方法是使用visibility:hidden代替隐藏内部可拖动项，以便元素将呈现，并拖动激活 droppables以便< em> over ， out 等功能正常。

＆＃13;

$(document).ready(function() {
  $('.draggable_area').draggable();

  $('.main_droppable_area').droppable({
    accept: '.draggable_area',
    over: function() {
      console.log('main_droppable_area - over');
      $('.drop_area').removeClass("invisible");
    },
    out: function() {
      console.log('main_droppable_area - out');
      $('.drop_area').addClass("invisible");
    }
  });

  $('.drop_area').droppable({
    activate: function() {
      console.log("activated");
    },
    accept: '.draggable_area',
    over: function() {
      $(this).addClass('active');
      console.log('drop_area - over');
    },
    out: function() {
      $(this).removeClass('active');
      console.log('drop_area - out');
    }
  });
});

＆＃13;

.main_droppable_area {
  position: absolute;
  top: 50px;
  left: 50px;
  right: 50px;
  height: 200px;
  border: 1px dashed blue;
}
.drop_area {
  position: absolute;
  border: 1px dashed blue;
  background-color: #eff;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.drop_area.active {
  opacity: 1;
  filter: alpha(opacity=100);
}
.drop_area.north {
  top: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
}
.drop_area.south {
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
}
.drop_area.west {
  top: 50px;
  left: 0px;
  bottom: 50px;
  width: 50px;
}
.drop_area.east {
  top: 50px;
  right: 0px;
  bottom: 50px;
  width: 50px;
}
.draggable_area {
  position: absolute;
  top: 300px;
  left: 50px;
  background-color: blue;
  width: 50px;
  height: 50px;
}
.invisible {
  visibility: hidden;
}

＆＃13;

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class='main_droppable_area'>
  <div class='drop_area north invisible'></div>
  <div class='drop_area east invisible'></div>
  <div class='drop_area south invisible'></div>
  <div class='drop_area west invisible'></div>
</div>
<div class='draggable_area'></div>

＆＃13;

隐藏的droppables即使在可见之后也不会触发和反复触发

1 个答案: