Question

我有一个包含三个按钮的div。 div需要可拖动，以便您可以将屏幕上的所有三个按钮拖动到一起。这工作正常，但问题是，当我点击各个按钮时，它继承了可拖动的ID，并且它可以自行拖动。我不希望这种情况发生。所以我的问题是：如何使我的按钮可拖动，但让它们始终保持在一起并保持可点击状态。我添加了下面的代码，但这里有一个 JSFiddle ：http://jsfiddle.net/2ga50vvt/

所以要明确：div也需要通过拖动其中一个按钮来拖动，但是div的其余部分需要坚持下去。现在拖动单个按钮只会移动按钮。

P.S。我不想使用 JQuery UI

HTML：

<div id="draggable" class="ui-widget-content">
  <button ng-click="menu.shown = !menu.shown">MENU</button>
  <br>
  <button ng-click="disconnect()">CLOSE</button>
  <br>
  <button ng-click="">KEYS</button>
</div>

JS

$(document).ready(function() {
  var $dragging = null;
  $('body').on("mousedown", "#draggable", function(e) {
    $(this).attr('unselectable', 'on').addClass('dragged');
    var el_w = $('.dragged').outerWidth(),
      el_h = $('.dragged').outerHeight();
    $('body').on("mousemove", function(e) {
      if ($dragging) {
        $dragging.offset({
          top: e.pageY - el_h / 2,
          left: e.pageX - el_w / 2
        });
      }
    });
    $dragging = $(e.target);
  }).on("mouseup", ".dragged", function(e) {
    $dragging = null;
    $(this).removeAttr('unselectable').removeClass('dragged');
  });
});

CSS：

body {
  padding: 50px;
}

.dragged {
  background-color: yellow;
}

#draggable {
  position: fixed;
  width: 150px;
  height 150px;
  padding: 0.5em;
  background: red;
  background-color: black;
  z-index: 1000;
  cursor: move;
  float: left;
}

更新1

这是一个有效的解决方案：http://jsfiddle.net/2ga50vvt/3/ 然而，当我点击div并开始拖动div的中心跳转到我的光标。它工作得很好，但看起来有点不稳定。有没有办法阻止div移动到我的光标？

非常欢迎你的帮助。

Answer 1

您可以阅读活动的target属性和return false，以避免所有非#draggable可拖动。

if(e.target.id !== "draggable") {
    return false;
}

编辑的小提琴：

http://jsfiddle.net/2ga50vvt/1/

它完美无缺，但有一个建议：不要使用ID进行定位，因为使用此代码您无法拖动更多的元素（ID必须唯一），因此解决方法是编写属性或类名并使用它。

祝你好运。

Answer 2

使用$dragging = $('#draggable');代替$dragging = $('e.target');

如果您尝试使用按钮上的光标拖动，它将拖动div。它将拖动#draggable而不是目标。

<强> Working Fiddle

Answer 3

假设你因为它的文件大小而反对JQueryUI，我仍然推荐一个预建的解决方案，因为为什么重新发明轮子？

Draggabilly是一个非常漂亮的库，我在资源大小问题时使用过它。它已经缩小了20k（显然甚至更小的gzip）并且可以在CDN上使用 - 这本身具有很多好处，例如缓存。

$(function() {
    $( "#draggable" ).draggabilly();
});

有一些CSS钩子，不同的选项，事件等。

JSFiddle here

如何使父div可拖动

3 个答案: