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事件以在click事件中可拖动。现在，无需按住鼠标按钮就可以移动鼠标，目标元素也将随之移动。再次单击以触发mouseup事件以进行拖动。

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

希望这会有所帮助。

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

1 个答案: