Question

我目前正在开发一个在线演示软件。为了这个问题，想象它作为powerpoint或主题演讲。我希望能够向幻灯片添加元素，然后将它们拖动（实时），获取新位置，更新数据库。但是，我希望在不使用外部库或框架（包括jQuery）的情况下执行此操作。谁能指出我的研究方向？我目前实现这一点的想法非常混乱。特别是现场拖拽让我感到头疼。

谢谢！

UPDATE！

元素看起来像这样：

<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>

Answer 1

虽然HTML5确实提供了原生拖放，但这不是您要求的。看看这个简单的教程来完成在vanilla JS中的拖动：http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx

Answer 2

有一个很棒的香草JS片段可用，但有一个问题 - 当元素开始拖动可点击元素时，它＆＃34;点击＆＃34;在mouseup上：在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>

这是＆＃34;插件＆＃34;：draggabilly

而且，这是我的独立解决方案，通过：class：of element：

(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));

拖动没有jQuery的元素

2 个答案: