當元素被拖動到窗口兩側並執行功能時檢測到

我正在使用jQuery UI的draggable方法在屏幕上拖動一個面板。我希望能夠在Photoshop中複製一個功能，您可以在屏幕邊緣附近拖動一個面板，並沿邊緣顯示一個發光條以指示它將附着在該面板上（同時將鼠標懸停在其上方狀態），並且當您放下面板時，它會轉換爲一個全高粘貼面板，並將其粘貼到您放置的邊緣上。當元素被拖動到窗口兩側並執行功能時檢測到

任何人都可以幫助實現這個在HTML/JS？

如果有人可以幫我檢測當我說在屏幕右側的10px內而拖/ start狀態，我可以處理其餘的。

來源

2013-04-23 Jody Heavener

也許我可以創建一個寬度爲10px，跨越頁面高度100％的元素，並使用'pointer-events：none'使它透明，然後將'droppable' jQuery UI方法附加到它只能接受面板下落並執行諸如將面板高度改爲100％等操作？這樣就有一個元素可以接受放置，但由於沒有指針事件，它不能用鼠標訪問？思考？ – 2013-04-23 19:02:57

你的概念似乎是合法的！保持一個元素接受droppable是我第一次想到的！所以這個技巧很好。

$("droppable-element").droppable(function(){ 
    accept:'draggable-element', 
    drop: function(event,ui){ 
     (this).css("change the CSS of the element inside this. probably pointer-events"); 
     //do the rest of the coding here. Probably the event handling when the dragged element is dropped. 
    } 
});

在上面的代碼，改變相應的CSS樣式，以爭回鼠標輔助。

來源

2013-04-26 07:34:22

當元素被拖動到窗口兩側並執行功能時檢測到

回答

相關問題