與引導線

Question

Interact.js互動JS有一個捕捉選項來搶購元素。但我不知道如何展示這些指導方針。我在考慮可能會發生一些事件，當發生搶購時，我可能會使用它們來顯示這些行，但我沒有在文檔中找到它們。

Answer 1

交互不支持這些開箱即用的準則，但您可以爲自己構建它們相對容易。

I built this小提琴展示過程。

最重要的部分是這樣的：

interact(element) 
    .draggable({ 
     snap: { 
      targets: [ 
       function (x, y) { 
        var newX = Math.round(x/50) * 50; 
        var newY = Math.round(y/50) * 50; 
        someFunction(newX, newY); 
        return { 
         x: newX, 
         y: newY 
        }; 
      }], 

正如你所看到的，你可以建立一個決定關於你當前鼠標位置的捕捉位置（newX and newY）的功能。 在這個功能中，你也可以調用另一個功能。在這種情況下，我調用一個函數來顯示一行，如果對象在這個位置。在這裏你可以創造性。您可以將一行元素的位置設置爲當前位置，您可以設置一些預定義的行並計算哪一行最接近才能顯示該行，這取決於您的業務問題。

有關相互作用的詳細信息 - 搶購，看在here in the docs