jQuery Draggable - начать перетаскивание элемента, щелкнув по нему, не удерживая мышь - PullRequest
Новая
       25

jQuery Draggable - начать перетаскивание элемента, щелкнув по нему, не удерживая мышь

0 голосов
/ 13 июня 2019

Рассмотрим базовый элемент jQuery Draggable. Есть ли способ начать перетаскивание элемента одним щелчком мыши? (т. е. когда элемент щелкается, он входит в состояние перетаскивания и начинает следовать за мышью, при повторном щелчке он падает там, где он находится)

Если это невозможно с jQuery, возможно ли это с любой другой библиотекой перетаскивания сторонних производителей?

1 Ответ

1 голос
/ 14 июня 2019

Вы можете сделать это каким-то хакерским методом, запустив mousedown и mouseup для перетаскиваемого события щелчка.

Ссылка: Как программно вызвать jQuery UI Перетаскиваемое начало перетаскивания?

Ссылаясь на ответ от fuzzyBSc

Рассмотрим следующий код. 

$(function() {
  // Example: https://jqueryui.com/draggable/#events
  var $start_counter = $("#event-start"),
    $drag_counter = $("#event-drag"),
    $stop_counter = $("#event-stop"),
    counts = [0, 0, 0];

  function updateCounterStatus($event_counter, new_count) {
    // first update the status visually...
    if (!$event_counter.hasClass("ui-state-hover")) {
      $event_counter.addClass("ui-state-hover")
        .siblings().removeClass("ui-state-hover");
    }
    // ...then update the numbers
    $("span.count", $event_counter).text(new_count);
  }

  // Helper Functions
  function makeDrag(obj) {
    obj.draggable({
      start: function(e, ui) {
        counts[0]++;
        updateCounterStatus($start_counter, counts[0]);
      },
      drag: function() {
        counts[1]++;
        updateCounterStatus($drag_counter, counts[1]);
      },
      stop: function() {
        counts[2]++;
        updateCounterStatus($stop_counter, counts[2]);
      }
    });
  }

  function stopDrag(obj) {
    obj.draggable("destroy");
  }

  // Custom Click Event to trigger Drag
  $("#draggable").click(function(e) {
    if ($(this).hasClass("dragging")) {
      $(this).removeClass("dragging");
      e.type = "mouseup.draggable";
      e.target = this;
      $(this).trigger(e);
      stopDrag($(this));
    } else {
      $(this).addClass("dragging");
      makeDrag($(this));
      e.type = "mousedown.draggable";
      e.target = this;
      $(this).trigger(e);
    }
  });
});
#draggable {
  width: 16em;
  padding: 0 1em;
}

#draggable ul li {
  margin: 1em 0;
  padding: 0.5em 0;
}

* html #draggable ul li {
  height: 1%;
}

#draggable ul li span.ui-icon {
  float: left;
}

#draggable ul li span.count {
  font-weight: bold;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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 id="draggable" class="ui-widget ui-widget-content">
  <p>Drag me to trigger the chain of events.</p>
  <ul class="ui-helper-reset">
    <li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
    <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
    <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
  </ul>
</div>

Как видите, я использую пример Events в https://jqueryui.com/draggable/#events для базового кода. Я использую это, так как он показывает, когда происходят события.

Во-первых, мы будем использовать событие click для запуска запуска, а также для запуска остановки для перетаскивания. Чтобы помочь определить это, я добавляю класс dragging, чтобы мы могли определить состояние цели.

При первом щелчке, dragging отсутствует, мы вызовем событие mousedown для перетаскивания в пределах события щелчка. Теперь, не удерживая кнопку мыши, мы можем двигать мышь, и целевой элемент будет двигаться вместе с ней. Нажмите еще раз, чтобы вызвать событие mouseup для перетаскиваемого.

Я думаю, что это будет работать для большинства сценариев. Я не знаю, как мобильные устройства могли бы справиться с этим, поскольку нет события типа mousemove.

Надеюсь, это поможет.

...