Question

我需要使一个div可拖动并根据鼠标位置设置它的左侧位置。我搜索了一下，这是我到目前为止所做的：

container = $('<div></div>').appendTo($('body')).addClass('container');

someText = $('<div>Some text</div>').appendTo(container);

slider = $('<div></div>').appendTo(container);
slider.addClass('slider');

var isDragging = false;
slider.on('mousedown', function () {
    isDragging = true;
});
$(window).on('mouseup', function () {
    console.log('mouseup');
    isDragging = false;
});
container.on('mouseleave', function () {
    console.log('mouseleave');
    isDragging = false;
});
container.on('mousemove', function (e) {
    if (isDragging) {
        var newLeft = parseInt((e.pageX - container.offset().left), 10);
        console.log(newLeft);
        slider.css('left', newLeft);
    }
});

http://jsfiddle.net/w9gxxuvw/2/

白盒子应该是可拖动的，但有一些缺点。首先，当我用我的LPM向下拖动时，我选择上部文本。其次，在Chrome上我快速拖动它时，它不会触发鼠标向上事件，所以“滑块”只是在光标移动到“容器”内部时跟随光标，我需要点击某处停止。

我没有必要使用jQuery，但我不会使用其他大框架和jquery插件。

Answer 1

您可以使用user-select CSS属性阻止文本选择：

container = $('<div></div>').appendTo($('body')).addClass('container');

someText = $('<div>Some text</div>').appendTo(container);

slider = $('<div></div>').appendTo(container);
slider.addClass('slider');

var isDragging = false;

slider.on('mousedown', function () {
  isDragging = true;
});

$(window).on('mouseup', function () {
  isDragging = false;
});

container.on('mouseleave', function () {
  isDragging = false;
});

container.on('mousemove', function (e) {
  if (isDragging) {
    var newLeft = parseInt((e.pageX - container.offset().left), 10);
    slider.css('left', newLeft);
  }
});

.container {
    display:block;
    width:400px;
    height:100px;
    background: red;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.slider {
    display:block;
    width:10px;
    height:10px;
    background: #fff;
    position:relative;
    left: 0%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我无法重现Chrome 42，Firefox 36或Safari 7中可拖动鼠标的问题。上面的示例为我完美运行。

Answer 2

在脚本中阻止文本选择的默认操作似乎更合乎逻辑，它也比CSS user-select提供更深入的支持。由于（大部分）事件都是在这个功能中连接起来的，所以我将它们嵌套起来。它允许一些优化。解除鼠标移动也是有意义的，在几次事件之后，你通常会开始注意到缓慢的行为。

...

container.on('mousedown', function(e) {
e.preventDefault();
});

slider.on('mousedown', function() {

$(window).one('mouseup', function() {
console.log('mouseup');
container.off('mousemove');
});

container.on('mousemove', function(e) {
var newLeft = Math.round(e.pageX-container.offset().left);
console.log(newLeft);
slider.css('left', newLeft);
})
.one('mouseleave', function() {
console.log('mouseleave');
container.off('mousemove');
});
});

http://jsfiddle.net/w9gxxuvw/8/

Javascript拖动对象

2 个答案: