我正在嘗試使我的可拖動元素僅在我按下控制按鈕并拖動它時被克隆。我對該draggable()功能的選擇是：
var pressedKeys = {};
window.onkeyup = function(e) { pressedKeys[e.keyCode] = false; }
window.onkeydown = function(e) { pressedKeys[e.keyCode] = true; }
var draggable_options = {
snap: '.slot',
snapMode: 'inner',
scroll: false,
start: function(event,ui){
if (pressedKeys[17]){
$(ui.helper).draggable('option','helper','clone');
}
},
}
這甚至可能嗎？我試過了ui.element，也this沒有奏效。我不確定您是否可以在運行時更改 jquery 函式的選項。
uj5u.com熱心網友回復：
考慮以下。
$(function() {
var pressedKeys = {
17: false
};
$(window).on({
keyup: function(e) {
pressedKeys[e.keyCode] = false;
$("#draggable").draggable("option", "helper", "original");
},
keydown: function(e) {
console.log("Key Pressed: " e.keyCode);
pressedKeys[e.keyCode] = true;
$("#draggable").draggable("option", "helper", "clone");
}
})
$("#draggable").draggable({
snap: '.slot',
snapMode: 'inner',
scroll: false
});
});#draggable {
width: 150px;
height: 150px;
padding: 0.5em;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>另一種解決方案。我會親自建議這個解決方案。
$(function() {
var pressedKeys = {
17: false
};
$(window).on({
keyup: function(e) {
pressedKeys[e.keyCode] = false;
},
keydown: function(e) {
console.log("Key Pressed: " e.keyCode);
pressedKeys[e.keyCode] = true;
}
})
$("#draggable").draggable({
snap: '.slot',
snapMode: 'inner',
scroll: false,
helper: function() {
return (pressedKeys[17] ? $(this).clone().removeAttr("id") : $(this));
}
});
});#draggable, .ui-draggable {
width: 150px;
height: 150px;
padding: 0.5em;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>查看更多：https ://api.jqueryui.com/draggable/#option-helper
start回呼觸發太晚，無法生成克隆。這就是為什么helper選項提供了一個函式來根據需要動態創建助手。
這是_createHelper庫中的代碼：
var o = this.options,
helperIsFunction = typeof o.helper === "function",
helper = helperIsFunction ? $( o.helper.apply( this.element[ 0 ], [ event ] ) ) : ( o.helper === "clone" ? this.element.clone().removeAttr( "id" ) : this.element );
只需執行類似的活動即可復制代碼。有條件地，它將回傳原始檔案或克隆檔案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/476146.html
上一篇：如何使用MSAccess和OLEDB在SQL查詢中比較字串型別的日期
下一篇：Docker基本命令