将div移入或移出其他div

Question

我想在移动蓝色div时添加一个条件。它的位置不能在边界上，我希望它在其他div之外或之内。

代码：

$("#surface").droppable({
        drop: function(e, ui) {
            x = ui.helper.clone(false);
            x.draggable({
                helper: 'original',
                containment: '#surface',
                tolerance: 'fit'
            });
            x.find('.ui-resizable-handle').remove();
            x.resizable({
                //maxHeight: 60,
                minHeight: 60,
                minWidth: 50
            });
            x.appendTo('#surface');

            ui.helper.remove();
        }
    });
});

Answer 1

你可以使用以下代码。

＆＃13;

＆＃13;

$('.drop').droppable({
  tolerance: 'intersect',
  drop: function(event, ui) {
    var drop_p = $(this).offset();
    var drag_p = ui.draggable.offset();
    var left_end = drop_p.left - drag_p.left + 1;
    var top_end = drop_p.top - drag_p.top + 1;
    ui.draggable.animate({
      top: '+=' + top_end,
      left: '+=' + left_end
    });
  }
});

$('.boxArt').draggable({
  revert: 'invalid',
  scroll: false,
  stack: ".boxArt"
});

＆＃13;

.drop {
  width: 155px;
  height: 200px;
  border: 1px solid #0C5F8B;
  margin-top: 30px;
  margin-left: 34px;
  float: left;
}
.boxArt {
  width: 155px;
  height: 200px;
  background: #CCC;
}
.red {
  background: #f00;
}
.green {
  background: #0f0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<div class="boxArt red">DRAG ME</div>
<div class="drop"></div>

＆＃13;

＆＃13;

＆＃13;

演示：http://jsfiddle.net/kishoresahas/q5mozp3b/