检测何时在窗口两侧拖动元素并执行功能

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样式以获得鼠标可访问性。