仅在按下按钮时使用克隆助手

Question

我正在努力使我的可拖动元素只有在我按下控制按钮并拖动它时才会被克隆。 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 函数的选项。

Answer 1

考虑以下因素。

$(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 );

只需执行类似的 activity 即可复制代码。有条件地，它将 return 原始的或克隆的。

仅在按下按钮时使用克隆助手

Use clone helper only when button pressed

jquery-ui

jquery-ui-draggable