考虑一个基本的 jQuery Draggable 元素。有没有什么方法可以通过单击鼠标开始拖动元素？ （即，当元素被单击时，它进入拖动状态，并开始跟随鼠标，当再次单击时，它会掉落到原来的位置）
如果这无法通过 jQuery 实现，那么是否可以通过任何其他第三方拖动库实现？
您可以通过某种黑客方法通过触发来做到这一点mousedown and mouseup用于点击事件时可拖动。
参考：如何以编程方式调用 jQuery UI Draggable 拖动启动？ https://stackoverflow.com/questions/13883214/how-to-programmatically-invoke-jquery-ui-draggable-drag-start
参考答案来自fuzzyBSc https://stackoverflow.com/users/1517272/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 https://jqueryui.com/draggable/#events为基本代码。我使用它是因为它显示事件何时被触发。
首先，我们将使用click触发开始并触发拖动停止的事件。为了帮助识别这一点，我添加了一个类dragging以便我们可以确定目标的状态。
初次点击时，dragging不存在，我们将触发mousedown单击事件中的可拖动事件。现在，无需按住鼠标按钮，我们就可以移动鼠标，目标元素也会随之移动。再次点击即可触发mouseup可拖动事件。
我认为这适用于大多数场景。我不知道移动设备如何处理这个问题，因为没有mousemove事件类型。
希望这可以帮助。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
