Question

我正在使用以下代码允许用户垂直调整DIV元素的大小，但是当单击并拖动页面上的句柄，文本和其他元素时，选择就像用户只是单击并突出显示页。有没有办法防止这种情况发生，因为这看起来非常糟糕？这与Prototype.js一起使用。

function DragCorner(container, handle) {
    var container = $(container);
    var handle = $(handle);

    // Add property to container to store position variables
    container.moveposition = {y:0};

    function moveListener(event) {
        // Calculate how far the mouse moved
        var moved = { y:(container.moveposition.y - event.pointerY()) };
        // Reset container's x/y utility property 
        container.moveposition = {y:event.pointerY()};
        // Update container's size
        var size = container.getDimensions();
        container.setStyle({height: size.height + moved.y + 'px'});
    }

    // Listen for 'mouse down' on handle to start the move listener
    handle.observe('mousedown', function(event) {
        // Set starting x/y 
        container.moveposition = {y:event.pointerY()};
        // Start listening for mouse move on body 
        Event.observe(document.body,'mousemove',moveListener);
    });

    // Listen for 'mouse up' to cancel 'move' listener 
    Event.observe(document.body,'mouseup', function(event) {
        Event.stopObserving(document.body,'mousemove',moveListener);
        console.log('stop listening');
    });
}

Answer 1

按照您之前的问题和答案，添加一个小句柄元素，并将其作为唯一可以选择和拖动的元素。另外我猜你把div的位置设为relative并将位置设为absolute。右??

Answer 2

将以下内容添加到DIV中修复了此问题：

onselectstart="return false;"

Javascript拖动选择拖动区域周围的文本和元素

2 个答案: