javascript - Dragging elements WITHOUT jQuery - Stack Overflow

admin管理员组

文章数量:1355564

I am currently working on an online presentation software. For the sake of this question imagine it as powerpoint or keynote. I want to be able to add elements to the slide and then drag them around (live), getting the new position, updating the database. However I want to do this without any use of external libraries or frameworks, including jQuery. Can anyone point me in a direction for my research? My current ideas to implement this are pretty messy. Especially the live-dragging is what's giving me headaches.

Thanks!

UPDATE!

the elements look something like this:

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

I am currently working on an online presentation software. For the sake of this question imagine it as powerpoint or keynote. I want to be able to add elements to the slide and then drag them around (live), getting the new position, updating the database. However I want to do this without any use of external libraries or frameworks, including jQuery. Can anyone point me in a direction for my research? My current ideas to implement this are pretty messy. Especially the live-dragging is what's giving me headaches.

Thanks!

UPDATE!

the elements look something like this:

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

• javascript

Share Improve this question Follow edited Nov 22, 2013 at 21:30 tpei asked Nov 22, 2013 at 21:05 tpeitpei 7011010 silver badges2828 bronze badges 24

• 2 @HighCore you know that jQuery is a Javascript Framework? – Carlangueitor Commented Nov 22, 2013 at 21:11
• 3 @HighCore that's ridiculous. jQuery was written in JavaScript. – sbking Commented Nov 22, 2013 at 21:11
• 3 @HighCore Oh my. please don't. Learn what HTML is, what javascript is, and then speak about jQuery. And no, HTML is not pletely useless! – leMoisela Commented Nov 22, 2013 at 21:21
• 1 @HighCore You are confused my friend, XAML is just an abstraction of HTML and is ultimately rendered into HTML. – Rob M. Commented Nov 22, 2013 at 21:23
• 2 @Carlangueitor Everything you can make with jQuery you can make with plain js, that's true. It's also true that you could chop down a tree with a pletely disassembled chainsaw, provided you have time and effort to throw away by assembling it yourself. – Yandros Commented Nov 22, 2013 at 21:30

 |  Show 19 more ments

2 Answers 2

Sorted by: Reset to default 4

While HTML5 does provide native drag and drop, this isn't what you asked for. Check out this simple tutorial to acplish dragging in vanilla JS: http://luke.breuer./tutorial/javascript-drag-and-drop-tutorial.aspx

There is great vanilla JS snippet available, but with one problem - when element start dragged on clickable element, it "clicks" on mouseup: see it on 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>

here is the "plugin": draggabilly

And, here is my independent solution, working by :class: of the 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));

本文标签： javascriptDragging elements WITHOUT jQueryStack Overflow