Javascript ondrag, ondragstart, ondragend

问题

I've been trying to use ondrag() and some other functions on a div rendered dynamically on an HTML page.

None of these events seem to fire, nor do I get any errors. I can't find much helpful documentation on it either. Am I interpreting it wrongly, can you use these events to script functionality to drag a div around the screen?

回答1:

Have a look at this documentation: https://developer.mozilla.org/En/DragDrop/Drag_and_Drop

Note: It does not work in every browser.

If you want a cross-browser support use jQuery: http://jqueryui.com/demos/draggable/

jQuery example:

<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>

<script>
    $(function() {
        $( "#draggable" ).draggable({
            drag: function(event, ui) {}
        });
    });
</script>

Another example:

<div id="toBeDragged" draggable="true">
  This text <strong>may</strong> be dragged.
</div>

<script>
document.getElementById('toBeDragged').addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text/plain', 'This text may be dragged');
});
</script>

回答2:

I haven't used drag myself much but I believe it's the drag "edit action" - eg selecting text and dragging it within a textbox/textarea.

You may need to implement your own onmousedown() onmouseup() and onmousemove() handlers for the functionality I think you're after

回答3:

An easy way to do this is with jQuery UI, make sure you use it after your dynamic div has been rendered.

$(document).ready(function () {
    $('.my_draggable_elements').draggable({
        drag: function(){
          // do something
        }
    });
});

回答4:

Is there content in the div? I don't think it's the element itself that gets dragged in this particular event.

来源：https://stackoverflow.com/questions/4367055/javascript-ondrag-ondragstart-ondragend

标签

javascript

drag-and-drop