Friday, 5 September 2014
DRAG AND DROP IMAGES ABOVE BOX TO BELOW BOX WITH JQUERY
-------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE:
READ MORE:
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
-------------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DRAG AND DROP IMAGES ABOVE BOX TO BELOW BOX WITH JQUERY</title>
<style type="text/css">
body {
font-family:Arial;
font-size:10pt;
}
img {
height:100px;
width:100px;
margin:2px;
}
.draggable {
filter:alpha(opacity=60);
opacity:0.6;
}
.dropped {
position:static !important;
}
#dvSource,#dvDest {
border:5px solid #ccc;
padding:5px;
min-height:100px;
width: 430px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://code.jquery.com/ui/1.8.24/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#dvSource img").draggable({
revert: "invalid",
refreshPositions: true,
drag: function (event, ui) {
ui.helper.addClass("draggable");
},
stop: function (event, ui) {
ui.helper.removeClass("draggable");
var image = this.src.split("/")[this.src.split("/").length - 1];
if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
alert(image + " dropped.");
}
else {
alert(image + " not dropped.");
}
}
});
$("#dvDest").droppable({
drop: function (event, ui) {
if ($("#dvDest img").length == 0) {
$("#dvDest").html("");
}
ui.draggable.addClass("dropped");
$("#dvDest").append(ui.draggable);
}
});
});
</script>
</head>
<body>
<div id="dvSource">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ-Y_BwFKbQwaOckN0Jzig6faVOTH69SkJXoN8dZrLyFfJlvFB8LIKRCw2Q4zm3UNBKg3KFSthUX0SZ99E2rd5SHOYm3hfRzDt-abHj5FCgmZd-dwvDuJo4FqzCgLv_-cWDxU1fyE3L06q/s1600/Chrysanthemum.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju1gUbDzsejCRHLchrErIs1DJzaXgaJCwtQsSZ3mxJ-oS-aII89bh33beVH7SgJaXI18FeG1kU9rj_K_nW3TY8HCQkcbw3W5lHicq1uisbHv21-0qgy1RhmoNSLiAKUMyQPdlu-M-i8Sx2/s1600/Desert.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-b65G9kxwCb1UR2s1sCQyaiJoKvsymCJiazsteBVV_BOssFFHg7G71n5zRocXAAaEoWc8Z9WvTH7QbKYV_RMRL5F-XfD-_Xk5JLAGZ5_r8oS6wbe2QQKVQ-Jqdmgl0zydUOgfrMp1kM6/s1600/Hydrangeas.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR33-Q_WKBkbWHJmmyhywDMNVP9t09X4GiAZHXsx6Adl0q52yKaRs8-WvNTrgHrhTpnefgJ3PWnApGUb_JbDvyFI1PDEtE8No1kDqXnirN_PaixYkkyZRkjKQHiVT-lLgcc24M3TMJ7Ru6/s1600/Jellyfish.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfVVkyeGcakqaoqisaL64IhoZHsuf6JiJNRTIxZxRNiMJXUP7l6e5WvVmwwKLlS_1v-G7KqYqh9rRjjmRmjk9UO5BWc3WCxDNOj7LeDfvshefqSscnmTZ68n5isCNPr8-T8TjdYqL6jozn/s1600/Koala.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8bIeFAHj2WgYDTYPTydJHMtoI6WPH31fQt7auFDB6iucj3jf4Zlyiwo7pVogwi3-pJRPukTZeS5YhjALmdmJkJMgjWd82Fm6gpPkG7JTj3W1IaaBtN_eSARIf-es-QwCM08fttwEQDHIq/s1600/Lighthouse.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji-PtWgGTrumPJx1wWIHZOXbQWbXRA1lyT0KlOpV-h2pJ3L6bBFjihcfXEJ3HvAmmKG99dbxKMsYmJEgKU58Oi-3lpgpEFMkyUuxEXZFvqT2y_v_R_uWrlUbvKoYxrClAbZL8aNMEYw0iL/s1600/Penguins.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJJQ3lpWGitSUXgQ-4jvzx6aYr7BEwuQj3R3RmQdt2mt5JCOtO-8S2kUMkb3PbBI25JIJtlHQYGohk0-g6_UPsCtZ4fOMf_z61zBAtNSAePrEzSwiYD-FIZKzuonL1xk0ieIjJHZd_0cFz/s1600/Tulips.jpg" />
</div>
<hr />
<div id="dvDest">
Drop here
</div>
</body>
</html>
Related movie you might like to see :
INTENSO MAGENTO QUICK VIEW BUTTON
Magento Hello World Module (Extensi...
BOOLEAN MATCHING GAME JAVASCRIPT
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++
Related Post for DRAG AND DROP IMAGES ABOVE BOX TO BELOW BOX WITH JQUERY
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER
JAVA COLOR PICKER WITH
IMAGE SCROLL BOX WITH MOUSE CURSOR
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES
HOW TO GET MALWARE ADD POPUP WITHOUT SOFTWARE
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE
POST DATE HEADER IN BLOG
How to open a .DLL or .EXE file in Resource Editor
WHACK A RAT CSS GAME
AUTOMATION ANY WEBSITES
BOOTSNIPP LOGIN SIGNUP FORM
HTML CSS GREEN COMMENTS NOTEPAD++
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE
EDIT IMAGE IN NOTEPAD++.jpg)
INSTALL WORD PRESS TEMPLATE
WORD PRESS PARTS
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE
RELATED POST WIDGET LIST SHAPE
FLASH 8 DOWNLOAD
WEBSITE TRANSLATOR AND THUMBNAIL
DRAG AND DROP WITH IMAGE
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST
POST DATE THUMBNAIL IN BLOG
RELATED POST WIDGET LIST WITHOUT THUMBNAIL
Recommended Post Slide out for Blogger
SCREEN TO GIF
ONLINE ZIP OPNER
Related PostWidget WithFirst Big Thumbnail
SYNTAX HIGHLIGHTER ON LINE FOR BLOGGER 
MAKE DLL FILE AND OPEN IN VISUAL BASIC 2008-2010
NOTEPAD++ REMOVE UNWANTED LINES
HTML SYNTAX HIGHLIGHTER
FANCY BOX JS FIDDLE
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.