HTML5 Game - Drag and Drop Drag Source

Creating the Source Items

We mark the elements be dragged through the draggable attribute.

There are three permitted values for this attribute described in the following table.

Value	Description
true	The element can be dragged
false	The element cannot be dragged
auto	The browser may decide if an element can be dragged

The default is the auto value.

The following code shows a simple HTML document that has some elements that can be dragged.

Demo

ResultView the demo in separate window

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            #src > * {float:left;}
            #target, #src > img {border: thin solid black; padding: 2px; margin:4px;}
            #target {height: 81px; width: 81px; text-align: center; display: table;}
            #target > p {display: table-cell; vertical-align: middle;}
            #target > img {margin: 1px;}
            /*w  w w .  j av  a 2 s . co m*/
        </style>
    </head>
    <body>
        <div id="src">
            <img draggable="true" id="myJet1" src="http://java2s.com/style/demo/jet.png" alt="jet"/>
            <img draggable="true" id="myJet2" src="http://java2s.com/style/demo/jet2.png" alt="myJet2"/>
            <img draggable="true" id="myJet3" src="http://java2s.com/style/demo/jet3.png" alt="myJet3"/>
            <div id="target">
                <p>Drop Here</p>
            </div>            
        </div>            
    
        <script>
            let src = document.getElementById("src");
            let target = document.getElementById("target");
        </script>
    </body>
</html>

In the code above, there are three img elements, each of which has the draggable attribute set to true.