DRAG AND DROP WITH IMAGE

Saturday, 20 September 2014

DRAG AND DROP WITH IMAGE

-------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE:
READ MORE:
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-practice-game-with-image.html
http://fbgadgets.blogspot.co.uk/2014/09/DragAndDropHtmlGame.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-html-game_4.html
http://fbgadgets.blogspot.co.uk/2014/09/DragAndDropHtmlGameImages.html
http://fbgadgets.blogspot.co.uk/2014/09/DragAndDropHtmlGame.html
http://fbgadgets.blogspot.co.uk/2014/09/card-games-with-drag-and-drop-with.html

http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-images-above-box-to-below.html

http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-practice-game-with-image_6.html
http://www.grammar-quizzes.com/wrcite1_book.html
http://www.w3schools.com/html/html5_draganddrop.asp
-------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1,#div2 {
float:left;
width:100px;
height:35px;
margin:10px;
padding:10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text/html", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text/html");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ZAkO-ItVz_N7Jp6rxC3SZUdQE8DVQPvdMbXhOJNIS0D1p9wfq9p6fq4ChJl7G4OoUswbKdNhCM3bGcg1qmpo-PwOMJWApy3w-6xNmNm1pBAxLXS2bBeJG6LMYNn_m6fdqmkI6dwOPCw5/s1600/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>

-------------------------------------------------------------------------------------------------------------

DRAG AND DROP RETURN WITH EASE

http://jsfiddle.net/htWV3/1/

https://www.google.com/search?q=red+div+drag+and+revert+with+jquery&tbm=isch&ved=2ahUKEwiMvvajt5n5AhXigc4BHUAeCn0Q2-cCegQIABAA&oq=red+div+drag+and+revert+with+jquery&gs_lcp=CgNpbWcQA1AAWJYbYPQdaABwAHgAgAGhAogBkgySAQU1LjMuM5gBAKABAaoBC2d3cy13aXotaW1nwAEB&sclient=img&ei=F2DhYszWGuKDur4PwLyo6Ac&bih=640&biw=1349&rlz=1C1CHBF_en-GBGB970GB970&hl=en#imgrc=LvXUo103yORuhM

COLOR DRAG AND DROP GAMES

http://jsfiddle.net/tj_vantoll/S7pdy/

https://livebook.manning.com/book/jquery-ui-in-action/chapter-5/34

https://roytuts.com/drag-and-drop-example-with-jquery/#source-code

-------------------------------------------------------------------------------------------------------------

<!-- https://jqueryui.com/draggable/#revert

https://www.c-sharpcorner.com/uploadfile/cd7c2e/stop-things-from-being-dragged-using-jquery/

https://roytuts.com/drag-and-drop-example-with-jquery/#source-code

-->

<style>

#dragMe, #dragMe2 { width: 100px; border: 1px black solid; color: rgb(216, 27, 140); height: 100px;

padding: 0.5em; float: left; margin: 10px 10px 10px 0; }

#dropInMe { width: 150px; height: 150px; border: 1px black solid; background-color: grey;

padding: 0.5em; float: left; margin: 10px; }

</style>

$(function () {

$("#dragMe2").draggable({ revert: "invalid" });

$("#dropInMe").droppable({

activeClass: "ui-state-default",

drop: function (event, ui) {

$(this)

.addClass("ui-state-highlight")

.find("p")

}

});

</script>

</head>

<body>

<p>I will get back when I'm not dropped</p>

</div>

</body>

</html>

-------------------------------------------------------------------------------------------------------------

DRAG AND DROP QUIZ

-------------------------------------------------------------------------------------------------------------

<html>

<!-- https://www.w3schools.com/code/tryit.asp?filename=GPM2CIZOEXLU

https://www.youtube.com/watch?v=9P-MD9hacrs

https://www.ikhtabirni.com/how-to-make-a-drag-and-drop-game.html

https://roytuts.com/drag-and-drop-example-with-jquery/#source-code

-->

<head>

</head>

<body>

<style>

.box001 {

float: left;

width: 75px;

height: 15px;

margin: 12px;

padding: 10px;

border: 1px solid black;

}

.box002 {

float: left;

width: 75px;

height: 15px;

margin: 12px;

padding: 10px;

border: 1px solid white;

}

</style>

<p>Score: <text id="score001">0</text></p>

<text ondragstart="dragStart001(event)" draggable="true" id="target001">Jerusalem</text>

</div>

<text ondragstart="dragStart002(event)" draggable="true" id="target002">Amman</text>

</div>

<text ondragstart="dragStart003(event)" draggable="true" id="target003">London</text>

</div>

<text ondragstart="dragStart004(event)" draggable="true" id="target004">Brasilia</text>

</div>

<text ondragstart="dragStart005(event)" draggable="true" id="target005">Ottawa</text></div>

</div>

<div class="box001" ondrop="put001(event)" ondragover="allowDrop001(event)" id="place001">Palestine</div>

<div class="box001" ondrop="put002(event)" ondragover="allowDrop002(event)" id="place002">Jordan</div>

<div class="box001" ondrop="put004(event)" ondragover="allowDrop004(event)" id="place004">Brazil</div>

<div class="box001" ondrop="put005(event)" ondragover="allowDrop005(event)" id="place005">Canada</div><br /><br /><br />

<button onclick="submit001()">Submit</button>

var b = 0;

b++;

function dragStart001(event) {

event.dataTransfer.setData("choice001", event.target.id);

}

function dragStart002(event) {

event.dataTransfer.setData("choice002", event.target.id);

}

function dragStart003(event) {

event.dataTransfer.setData("choice003", event.target.id);

}

function dragStart004(event) {

event.dataTransfer.setData("choice004", event.target.id);

}

function dragStart005(event) {

event.dataTransfer.setData("choice005", event.target.id);

}

function allowDrop001(event) {

event.preventDefault();

}

function allowDrop002(event) {

event.preventDefault();

}

function allowDrop003(event) {

event.preventDefault();

}

function allowDrop004(event) {

event.preventDefault();

}

function allowDrop005(event) {

event.preventDefault();

}

function put001(event) {

var data = event.dataTransfer.getData("choice001");