Javascript 拖动对象

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 向下拖动时，我 select 上面的文本。其次，在 chrome 上，当我快速拖动它时，它不会触发鼠标弹起事件，因此 'slider' 只是跟随光标在 'container' 内移动，我需要单击某处才能停止。

我没有必要使用 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 得到更深入的支持。由于（大部分）事件在此函数中连接，因此我将它们嵌套。它将允许进行一些优化。取消绑定 mousemove 也是有意义的，在几次事件之后，您通常可能会开始注意到其他情况下的缓慢行为。

...

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 拖动对象

Javascript dragging object

javascript

jquery

drag