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 :
GET BUTTON ID AFTER CLICK IN JAVA S...
JAVA SCRIPT LOOP
QUIZY MEMORY CARD GAME
CTX STYLE
IMAGE SRC ARRAY IN JAVA SCRIPT
QUIZ ACTIVITY MAKER
MEMORY GAME WITH UPPER HIDDEN CARD
HTML SYNTAX HIGHLIGHTER
PADDING BUTTON
CSS CLICK DROPDOWN
HTML CSS GREEN COMMENTS NOTEPAD++
JAVA SCRIPT BOOKS ONLINE
BASIC ELEVATE ZOOM PLUS
ELEVATE ZOOM JAVA SCRIPT WITH ONE I...
PRINT STAR PATTERN IN JAVA SCRIPT
MOUSE OVER MOUSE OUT IN JAVA SCRIPT
EDIT IMAGE IN NOTEPAD++
NOTEPAD++ REMOVE UNWANTED LINES
Direct Link Generator CODE
Direct Links to your Files on Googl...
Related Post for DRAG AND DROP WITH IMAGE
SCREEN TO GIF
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST
RAINBOW RANDOM POST CODE WITH BLOG URL BUT NO IMAGE
HTML CSS GREEN COMMENTS NOTEPAD++
ARROW BUTTON
BOOTSNIPP LOGIN SIGNUP FORM
BUTTON CHANGE INTO DROPDOWN MENU
MULTI COLOR
LINK CHANGE INTO BUTTON
MULTI COLOR LABEL CLOUD WIDGET
IMAGE UPLOAD WITH JAVA WITH PHP CODE
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES
TEXT COMPARE OR DUPLI TEXT FINDER
BLOCK JAVA SCRIPT BY GOOGLE CHROME
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE
DRAG AND DROP WITH IMAGE
RELATED POST WIDGET LIST WITHOUT THUMBNAIL
NOTEPAD++ REMOVE UNWANTED LINES
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER
FLASH 8 DOWNLOAD
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.