How to drag and drop a div changing the css left and top attributes in HTML 5?


Tags: javascript,css,html5,html,drag-and-drop

Problem :

I would like to perform a drag and drop on a div in HTML 5. The goal is to move a div anywhere in the main container.

Here is my html code :

<html>
<head>
    <title>Mon document</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="dragndrop.js"></script>
</head>

<body ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);">
    <div class="box" draggable="true">
        Drag me if you can !
    </div>
</body>

The style.css :

.box {
      position: absolute;
      top: 100px;
      left: 400px;
      color: white;
      background-color: #6495ED;
      border: 10px solid #6495ED;
      -webkit-box-shadow: 4px 4px 6px #999; 
      box-shadow: 4px 4px 12px #555;
      border-radius: 7px; 
      width: 150px;
      height: 150px;
}

body {
      background-color:#EEEEEE;
}

And the javascript :

var mouseX;                         // Current mouse X           coordinate
var mouseY;                         // Current mouse Y  coordinate

document.onmousemove = mouseMove;

function dragStart(event) {
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData("Text", event.target.getAttribute('id'));
}

function dragOver(event) {
return false;
}

function drop(event) {
ev = event || window.event;
mouseX = ev.pageX;
mouseY = ev.pageY;

var element = event.dataTransfer.getData("Text");

document.getElementById(element).style.left = mouseX+"px";
document.getElementById(element).style.top = mouseY+"px";

event.stopPropagation();

return false;
} 

It does not work, so I think there is something wrong in the javascript function drop. But I can not see what (I never worked with js before that).

Thanks for help.



Solution :

I will follow this good advice and use jquery instead. I found here the demo and code I need : jQuery UI - draggable demo.


    CSS Howto..

    How to give the padding for option with css only

    How to make a back-to-top button using CSS and HTML only?

    How to add a custom font to Rails app?

    How do I turn CSS into example HTML? Is there a shortcut to understanding affects of CSS on nested HTML tags?

    How to set a td floating left in chrome?

    How to Change Elements Before & After Navbar Collapse?

    How to refer to children elements in CSS

    How can i give transparency effect in CSS?

    How to set the box width same as the screen width?

    How can I align an image with css

    How do I wrap several buttons inside a TD element

    div height is not showing properly

    How to make jQuery css affect upcoming elements

    How to create a floating JavaScript Clock for UTC and Local Time?

    How to update element.styles css

    How to toggle display: inline and display toggle?

    how can i get a css table-cell link not to stretch the clickable area

    How to add conditional formatting to list items in CSS

    how to align vertically a dynamic-height div inside another fixed height div

    How to Create Grid/Tile View with CSS?

    How to add composite css -webkit-mask-image?

    jQuery toggle slides DIV up and down, but UL content animates left to right. How can I make the content slide up and down?

    how to make comment div active on hover

    How to generate image sprites in ember-cli using compass?

    css - How to set fixed width of div that is display:inline

    How to centralise a button div

    How to make a background with 45 degree lines with css?

    How to displaying and hiding again the div after clicking a button

    How to rotate image used as list type in unordered list

    c3.js - how to show hand cursor on bar chart hover