У меня есть div, содержащий три кнопки. Div должен быть перетаскиваемым, чтобы вы могли перетянуть все три кнопки по экрану вместе. Это прекрасно работает, но проблема в том, что когда я нажимаю на отдельные кнопки, он наследует перетаскиваемый идентификатор и сам по себе перетаскивается. Я не хочу, чтобы это произошло. Поэтому мой вопрос: как сделать так, чтобы мои кнопки перетаскивались, но чтобы они всегда оставались вместе и чтобы они были кликабельными. Я добавил код ниже, но вот JSFiddle : http://jsfiddle.net/2ga50vvt /

Итак, чтобы быть ясным: div также нужно перетаскивать путем перетаскивания одной из отдельных кнопок, но тогда остальные части div должны придерживаться этого. Теперь перетаскивание отдельной кнопки только перемещает кнопку.

Постскриптум Я не хочу использовать 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 на мой курсор?

Ваша помощь очень приветствуется.

0
larzz11 15 Дек 2015 в 14:31

3 ответа

Лучший ответ

Используйте $dragging = $('#draggable'); вместо $dragging = $('e.target');

Он будет перетаскивать div, если вы попытаетесь перетащить, используя курсор на кнопку. Он будет перетаскивать #draggable вместо цели.

Рабочая скрипка

1
ketan 15 Дек 2015 в 11:50

Вы можете прочитать свойство target события и return false, чтобы избежать возможности перетаскивания всех #draggable.

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

Отредактированная скрипка:

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

Это работает отлично, но есть одно предложение: не ориентируйтесь на идентификаторы, потому что с помощью этого кода вы не можете перетащить больше одного элемента (идентификаторы должны быть уникальными ), поэтому обходной путь должен написать атрибут или имя класса и играть с ним.

Удачи.

2
Marcos Pérez Gude 15 Дек 2015 в 11:40

Предполагая, что вы против JQueryUI из-за его размера файла, я бы по-прежнему рекомендовал готовое решение, потому что зачем изобретать велосипед?

Draggabilly - это действительно изящная библиотека, которую я использовал, когда размер ресурса был проблемой. Он минимизирован на 20 тыс. (Очевидно, даже меньше gzip) и доступен на CDN, что само по себе имеет много преимуществ, например. кэширование .

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

Есть несколько хуков CSS, различные опции, события и т. Д.

JSFiddle здесь

0
Michael 15 Дек 2015 в 11:57