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

Posted 2023-05-08

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

【英文标题】：jQuery Draggable - Start dragging element by clicking on it, without holding the mouse

【发布时间】：2019-10-27 12:06:32

【问题描述】：

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

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

【问题讨论】：

这不是默认行为的一部分。您可以 Widget Factory 它并基本上将 dragstop 事件重新绑定到另一个事件。您希望什么事件允许释放拖动的项目？

【参考方案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 类型的事件。

希望这会有所帮助。

【讨论】：

是的，这确实回答了我的问题，但是如果我既不能听到点击动作又该怎么办？我的预期用例是将 jQuery Draggable UI 与本机 HTML 5 Drag And Drop API 混合使用，这是我正在使用的插件的必要条件，以便能够在浏览器窗口之间拖放。我的计划是创建一些东西，在其中使用 HTML 5 API 在窗口之间拖动一些东西，当它触发 dragover 事件时，使用 jquery 创建一个可拖动对象，然后开始跟踪 HTML 5 对象。

@AdamBaranyai 以类似的方式，当您在目标窗口上创建新对象时，您可以使用新目标触发新的mousedown 事件。你问 X，我回答 X。如果你想知道 Y，你应该问 Y 的问题。如果这回答了这个问题，请将其标记为答案。如果您需要更多帮助，请处理您的 dragover 脚本并发布一个新问题。

我刚刚再次浏览了您的演示，以尝试更多地理解它，并可能根据我的需要重新实现它。你能解释一下为什么在第一次点击后销毁原始的可拖动元素，然后重新创建可拖动元素吗？

@AdamBaranyai 我真的没有一个好的答案，只是基本的经验。我想我试图避免点击事件冒泡到可拖动。因为click基本上是mousedown和mouseup，而那些是用来触发dragstart、drag和dragstop的，我只是分配了一个点击事件，然后在点击事件中触发mousedown手动。当 dnd 管理器认为鼠标按钮被按下时，这会欺骗它跟随鼠标指针。下一次单击按下按钮并“放下”项目。我销毁了可拖动对象，使其重置为等待点击状态。

我发了一个后续问题，有一个小提琴，因为我仍然有问题，也许如果你有时间，请看一下：***.com/questions/56715953/…