Saturday, 20 September 2014

DRAG AND DROP WITH IMAGE

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 
read more:
COLOR DRAG AND DROP GAMES
-------------------------------------------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- 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
-->
<head runat="server">
<title></title>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<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>
<script>
$(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>
<div id="dropInMe" class="ui-widget-header">
<p>Drop the two Div here</p>
<div id="dragMe2">
<p>I will get back when I'm not dropped</p>
</div>
</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>
<meta charset="utf-8" />
<title>Drop and Drag Game</title>
</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>
<div class="box002" ondrop="drop001(event)">
<text ondragstart="dragStart001(event)" draggable="true" id="target001">Jerusalem</text>
</div>
<div class="box002" ondrop="drop002(event)">
<text ondragstart="dragStart002(event)" draggable="true" id="target002">Amman</text>
</div>
<div class="box002" ondrop="drop003(event)">
<text ondragstart="dragStart003(event)" draggable="true" id="target003">London</text>
</div>
<div class="box002" ondrop="drop004(event)">
<text ondragstart="dragStart004(event)" draggable="true" id="target004">Brasilia</text>
</div>
<div class="box002" ondrop="drop005(event)">
<text ondragstart="dragStart005(event)" draggable="true" id="target005">Ottawa</text></div>
</div>
<br /><br /><br /><br />
<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="put003(event)" ondragover="allowDrop003(event)" id="place003">UK</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>
<p id="message001"></p>
<script>
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");
event.target.appendChild(document.getElementById(data));
score001.innerHTML = b++;
place001.innerHTML = "Jerusalem";
}
function put002(event) {
var data = event.dataTransfer.getData("choice002");
event.target.appendChild(document.getElementById(data));
score001.innerHTML = b++;
place002.innerHTML = "Amman";
}
function put003(event) {
var data = event.dataTransfer.getData("choice003");
event.target.appendChild(document.getElementById(data));
score001.innerHTML = b++;
place003.innerHTML = "London";
}
function put004(event) {
var data = event.dataTransfer.getData("choice004");
event.target.appendChild(document.getElementById(data));
score001.innerHTML = b++;
place004.innerHTML = "Brasilia";
}
function put005(event) {
var data = event.dataTransfer.getData("choice005");
event.target.appendChild(document.getElementById(data));
score001.innerHTML = b++;
place005.innerHTML = "Ottawa";
}
function drop001(event) {
event.preventDefault();
}
function drop002(event) {
event.preventDefault();
}
function drop003(event) {
event.preventDefault();
}
function drop004(event) {
event.preventDefault();
}
function drop005(event) {
event.preventDefault();
}
function submit001() {
if (b > 5) {
message001.innerHTML = "Congratulations.";
}
}
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------------------

Posted by on Saturday, 20 September 2014 at 10:44
Labels: , , , , , , , , , , , , , , , , , , ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets