jQuery Draggable - 通过单击开始拖动元素，无需按住鼠标

Question

考虑一个基本的 jQuery Draggable 元素。有没有什么方法可以通过单击鼠标开始拖动元素？ （即当元素被点击时，进入拖拽状态，开始跟随鼠标，再次点击时，被拖拽到原处）

如果这不能通过 jQuery 实现，是否可以通过任何其他第三方拖动库来实现？

Answer 1

您可以通过触发mousedown 和mouseup 来实现可拖动点击事件。

参考：How to programmatically invoke jQuery UI Draggable drag start?

参考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>

如您所见，我使用https://jqueryui.com/draggable/#events 的事件示例作为基本代码。我使用它是因为它显示了事件何时触发。

首先，我们将使用click 事件触发开始并触发停止以进行拖动。为了帮助识别这一点，我添加了一个类 dragging 以便我们可以确定目标的状态。

在初始点击时，dragging 不存在，我们将触发mousedown 事件以在点击事件中进行拖动。现在，无需按住鼠标按钮，我们就可以移动鼠标，目标元素也会随之移动。再次点击触发mouseup可拖动事件。

我认为这适用于大多数情况。我不知道移动设备如何处理这个问题，因为没有 mousemove 类型的事件。

希望这会有所帮助。