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-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>
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>
-------------------------------------------------------------------------------------------------------------
Related movie you might like to see :
Direct Links to your Files on Googl...
ON LINE JAVA LIBRARY
GOOGLE CUSTOM SEARCH BOX
RADIO BUTTON SLIDER TO KEY FRAME SL...
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR ...
ONLINE ZIP OPNER
JAVA COLOR PICKER WITH
GOOGLE CONSOLE
GOOGLE CHROME EXTENSION FILE SAVE O...
OPEN DESKTOP TEXT FILE BY COMMAND P...
HOW TO GET MALWARE ADD POPUP WITHOU...
SHOPIFY JACK MOORE ZOOM
RELATED POST WIDGET LIST SHAPE
BUTTON PADDING CHANGE HEIGHT WIDTH
CSS SYNTAX HIGHLIGHT CHANGE IN NOT...
WEB IMAGE DOWNLOADER
TEXT COMPARE OR DUPLI TEXT FINDER
BLOCK JAVA SCRIPT BY GOOGLE CHROME
MOUSE COORDINATES IN JAVA SCRIPT
RELATED POST WIDGET LIST WITHOUT TH...
Related Post for DRAG AND DROP WITH IMAGE
RELATED POST WIDGET LIST WITHOUT THUMBNAIL
Recommended Post Slide out for Blogger
WEBSITE TRANSLATOR AND THUMBNAIL
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE
DINO PAIRS MATCHING GAME
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE
FANCY BOX JS FIDDLE
WHACK A RAT CSS GAME
NOTEPAD++ REMOVE UNWANTED LINES
WORD PRESS PARTS
JAVA COLOR PICKER WITH
FLASH 8 DOWNLOAD
RELATED POST WIDGET LIST SHAPE
ONLINE ZIP OPNER
HTML CSS GREEN COMMENTS NOTEPAD++
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST
DRAG AND DROP PRACTICE GAME WITH IMAGE
HTML SYNTAX HIGHLIGHTER
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES.jpg)
INSTALL WORD PRESS TEMPLATE
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE
SYNTAX HIGHLIGHTER ON LINE FOR BLOGGER 
IMAGE UPLOAD WITH JAVA WITH PHP CODE
UnityAssetsExplorer
GENERIC BLOGGER TEMPLATE WITH CSS HEADER IMAGE AND PAGINATION
HOW TO GET MALWARE ADD POPUP WITHOUT SOFTWARE
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE
DRAG AND DROP WITH JQUERY AND HTML TUTORIAL
How to open a .DLL or .EXE file in Resource Editor
Drag and Drop Practice Game With Image
Sprite Sheet Animation
SCREEN TO GIF
Related PostWidget WithFirst Big Thumbnail
DRAG AND DROP WITH IMAGE
AUTOMATION ANY WEBSITES
EDIT IMAGE IN NOTEPAD++
IMAGE SCROLL BOX WITH MOUSE CURSOR
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.