jQuery Draggable - Start dragging element by clicking on it, without holding the mouse

问题

Consider a basic jQuery Draggable element. Is there any method to start dragging the element with a single mouse click? (ie, when the element is clicked, it enters a drag state, and starts following the mouse, when it is clicked again, it gets dropped where it is)

If this isn't achievable with jQuery, is it achievable with any other third party dragging library?

回答1:

You can do this, in a sort of hack method, by triggering the mousedown and mouseup for draggable on click event.

Reference: How to programmatically invoke jQuery UI Draggable drag start?

Referring the answer from fuzzyBSc

Consider the following code.

$(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>

As you can see, I use the Events example at https://jqueryui.com/draggable/#events for the base code. I use this since it shows when events are triggered.

First, we will use click event to trigger start and also to trigger stop for drag. To help identify this, I add a class dragging so that we can determine the state of the target.

On the initial click, dragging not present, we will trigger the mousedown event for draggable within the click event. Now, without holding down the mouse button we can move the mouse and the target element will move with it. Click again to trigger the mouseup event for draggable.

I think this will work for most scenarios. I do not know how Mobile devices might handle this since there is not a mousemove type of event.

Hope this helps.

来源：https://stackoverflow.com/questions/56571291/jquery-draggable-start-dragging-element-by-clicking-on-it-without-holding-the