interact.js - 如何以编程方式触发dragstart

Question

我试图在 touchstart 事件 1000 毫秒后开始拖动可拖动项目。

我能够触发“dragstart”事件：

interact(element).fire({type: 'dragstart'});

但它只是执行与“开始”事件关联的函数，它并不使项目可拖动。

我的目标是创建一个 trello 风格的界面，其中包含可滚动的 droparea 列，其中包含可拖动的卡片。我已经知道有一个“hold”参数，但我认为我不能使用它，因为在 1000 毫秒内，可拖动项目上的其他手势（如滚动）似乎被禁用。

谢谢。

Answer 1

不确定这是否正是您所需要的，但您可以通过触发“向下”事件来开始拖动：

interact(element).on('down', event => {
 event.interaction.start({ name: 'drag' }, 
 event.interactable, 
 event.currentTarget);
});

Answer 2

文档中是用于克隆可拖动节点的片段。

interact('.item')
.draggable({ manualStart: true })
.on('move', function (event) {
var interaction = event.interaction

// if the pointer was moved while being held down
// and an interaction hasn't started yet
if (interaction.pointerIsDown && !interaction.interacting()) {
  var original = event.currentTarget,
    // create a clone of the currentTarget element
    clone = event.currentTarget.cloneNode(true)

  // insert the clone to the page
  // TODO: position the clone appropriately
  document.body.appendChild(clone)

  // start a drag interaction targeting the clone
  interaction.start({ name: 'drag' }, event.interactable, clone)
}
})

最后一行允许您以编程方式启动拖动事件。您可以更改触发器的条件或在开始处添加“hold：1000”：

interact('.item')
.draggable({ manualStart: true, hold: 1000 })

您仍然可以像这样包含听众：

interact('.draggable').draggable({
manualStart: true, 
hold: 1000,
listeners: {
start (event) {
  console.log(event.type, event.target)
},
move (event) {
  position.x += event.dx
  position.y += event.dy

  event.target.style.transform =
    `translate(${position.x}px, ${position.y}px)`
},
}
})
.on('move', function (event) {
var interaction = event.interaction

// if the pointer was moved while being held down
// and an interaction hasn't started yet
if (interaction.pointerIsDown && !interaction.interacting()) {
  var original = event.currentTarget,
    // create a clone of the currentTarget element
    clone = event.currentTarget.cloneNode(true)

  // insert the clone to the page
  // TODO: position the clone appropriately
  document.body.appendChild(clone)

  // start a drag interaction targeting the clone
  interaction.start({ name: 'drag' }, event.interactable, clone)
}
})