jQuery Draggable-通过单击元素开始拖动元素，而无需按住鼠标 [英] jQuery Draggable - Start dragging element by clicking on it, without holding the mouse

问题描述

考虑一个基本的jQuery Draggable元素.有什么方法可以通过单击鼠标来开始拖动元素? (即，当元素被单击时，它进入拖动状态，并开始跟随鼠标，再次被单击时，它被放到原处)

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)

如果jQuery无法实现这一点，那么其他任何第三方拖动库都可以实现吗?

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

推荐答案

您可以通过一种方法，通过触发mousedown和mouseup使其在点击事件上可拖动来进行此操作.

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

参考:如何以编程方式调用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/#使用事件示例事件(针对基本代码).我使用它是因为它显示了事件何时触发.

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.

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

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.

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

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.

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

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.

希望这会有所帮助.

这篇关于jQuery Draggable-通过单击元素开始拖动元素，而无需按住鼠标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！