jquery - 检测元素何时被拖动到窗口两侧并执行功能

Question

我正在使用 jQuery UI 的draggable方法在屏幕上拖动一个面板。我希望能够在 Photoshop 中复制一个功能，您可以在其中拖动一个面板靠近屏幕边缘，它将沿边缘显示一个发光条以指示它将附加到那里（同时将鼠标悬停在它上面状态），当你放下面板时，它会变成一个全高的粘性面板，附着在你放下它的边缘。

任何人都可以帮助在 HTML/JS 中实现这一点吗？

如果有人能帮我检测到我在拖动/start状态时屏幕右侧 10px 内的时间，我可能可以处理其余的。

Answer 1

你的概念似乎是合法的！保留一个元素来接受 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 样式以获得鼠标可访问性。