logo标签列表

不使用jQuery拖动元素

javascript
3
我目前正在开发一款在线演示软件。为了方便理解，可以将其想象成PowerPoint或Keynote。 我希望能够向幻灯片中添加元素，然后拖动它们（实时），获取新位置并更新数据库。 但是，我希望在不使用任何外部库或框架的情况下完成此操作，包括jQuery。 有人能指点我一下研究方向吗？我的当前想法实现起来比较混乱。特别是实时拖动功能让我头疼。 谢谢！
更新！
元素看起来像这样：
<div class="textelement" 
data-id="528fc9026803fa9d4b03e506" 
data-role="Textelement" 
style=" left: 50px; 
top: 50px; 
z-index: 0; 
width: 72px; 
height: 72px;">
    <div class="textnode">slide: 0 textelement: 0</div>
</div>
2
@HighCore 你知道jQuery是一个JavaScript框架吗？ - Carlangueitor
3
@HighCore 那太荒谬了。jQuery 是用 JavaScript 编写的。 - sbking
3
哦天啊，请不要这样说。先学习HTML和Javascript，再来讨论jQuery。另外，不，HTML并不是完全无用的！ - leMoisela
1
@HighCore 你有点困惑了，XAML只是HTML的抽象，最终会被渲染成HTML。 - Rob M.
2
@Carlangueitor 你可以用纯JS做所有jQuery能做的事情，这是真的。同样真实的是，如果你有时间和精力自己组装它，你也可以用完全拆开的电锯砍倒一棵树。 - Yandros
显示剩余19条评论
2个回答
4

有一个非常好用的原生JS代码片段，但是有一个问题 - 当元素开始拖动到可点击的元素上时，在鼠标抬起时会“点击”它：在http://codepen.io/ekurtovic/pen/LVpvmX 上可以看到。

<div class="draggable">
  <a href="#" onclick="alert('clicked');">Dont click me, just drag</a>
</div>
<script>
  // external js: draggabilly.pkgd.js
  var draggie = new Draggabilly('.draggable');
</script>

这里有一个“插件”：draggabilly

而且，这是我的独立解决方案，通过元素的:class:工作：

(function (document) {
    // Enable ECMAScript 5 strict mode within this function:
    'use strict';

    // Obtain a node list of all elements that have class="draggable":
    var draggable = document.getElementsByClassName('draggable'),
        draggableCount = draggable.length, // cache the length
        i; // iterator placeholder

    // This function initializes the drag of an element where an
    // event ("mousedown") has occurred:
    function startDrag(evt) {
        that.preventDefault();

        // The element's position is based on its top left corner,
        // but the mouse coordinates are inside of it, so we need
        // to calculate the positioning difference:
        var diffX = evt.clientX - this.offsetLeft,
            diffY = evt.clientY - this.offsetTop,
            that = this; // "this" refers to the current element,
        // let's keep it in cache for later use.

        // moveAlong places the current element (referenced by "that")
        // according to the current cursor position:
        function moveAlong(evt) {
            evt.preventDefault();
            var left = parseInt(evt.clientX - diffX);
            var top = parseInt(evt.clientY - diffY);

            // check for screen boundaries
            if (top < 0) { top = 0; }
            if (left < 0) { left = 0; }
            if (top > window.innerHeight-1) 
                { top = window.innerHeight-1; }
            if (left > window.innerWidth-1) 
                { left = window.innerWidth-1; }

            // set new position
            that.style.left = left + 'px';
            that.style.top = top + 'px';
        }

        // stopDrag removes event listeners from the element,
        // thus stopping the drag:
        function stopDrag() {
            document.removeEventListener('mousemove', moveAlong);
            document.removeEventListener('mouseup', stopDrag);
        }

        document.addEventListener('mouseup', stopDrag);
        document.addEventListener('mousemove', moveAlong);
        return false;
    }

    // Now that all the variables and functions are created,
    // we can go on and make the elements draggable by assigning
    // a "startDrag" function to a "mousedown" event that occurs
    // on those elements:
    if (draggableCount > 0) for (i = 0; i < draggableCount; i += 1) {
        draggable[i].addEventListener('mousedown', startDrag);
    }

}(document));
4
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接