DRAG AND DROP IMAGES ABOVE BOX TO BELOW BOX WITH JQUERY

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 Post for DRAG AND DROP IMAGES ABOVE BOX TO BELOW BOX WITH JQUERY

FLASH 8 DOWNLOAD DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINKS&n…
WORD PRESS PARTS -------------------------------------------------------------------------------------------------------- Read More: ----------------------------------…
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ----------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highl…
RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD </head> TAG AND PASTE BELOW CODE WHEN W…
Recommended Post Slide out for Blogger ---------------------------------------------------------------------------------------------------- RECOMMENDED POST SLIDE OUT FOR BLOG - YouTube ▶ 2:50 https:/…
AUTOMATION ANY WEBSITES ------------------------------------------------------------------------------------------------------ READ MORE: https://www.automationanywhere.com/webdataext?r=google&w=…
ONLINE ZIP OPNER ---------------------------------------------------------------------------------------------------------- FIND THIS RED WORD IN GOOGLE online zip opener READ MORE: http://onl…
IMAGE UPLOAD WITH JAVA WITH PHP CODE ------------------------------------------------------------------------------------------------------ CREATE FOLDER AND CREATE AND SAVE FILES ONE BY ONE IN THIS FOLDER &nb…
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST --------------------------------------------------------------------------------------------------------------------- NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST https://…
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/fla…
HTML SYNTAX HIGHLIGHTER ----------------------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------…
WEBSITE TRANSLATOR AND THUMBNAIL Read More: http://www.worldlingo.com/en/products/instant_website_translator.html http://www.makeathumbnail.com/thumbnail.php http://www.sciweavers.org/free-online-web-to-im…
BOOTSNIPP LOGIN SIGNUP FORM ----------------------------------------------------------------------------------------------------------- READ MORE: http://bootsnipp.com/tags/login http://bootsnipp.com/s…
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ========================================================================= COPY AND PASTE BELOW CODE IN BLOGGER TEMPLATE http://fbgadgets.blogspot.co.uk/2014/08/syntax-h…
NOTEPAD++ REMOVE UNWANTED LINES ------------------------------------------------------------------------------------------------------------------------------------------------------------ STEP NO : 1 1- CT…
EDIT IMAGE IN NOTEPAD++ ---------------------------------------------------------------------------------------------------------------------- https://www.google.co.uk/search?q=edit+picture+in+no…
SCREEN TO GIF ------------------------------------------------------------------------------------------------------------------ Read More: 3:30 PDF HTML IMAGE CONVERTER HD…
SYNTAX HIGHLIGHTER ON LINE FOR BLOGGER ---------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.u…
HOW TO GET MALWARE ADD POPUP WITHOUT SOFTWARE --------------------------------------------------------------------------------------------------------- STEP 1: GO TO WINDOW TASK MANAGER STEP 2: OPEN FILE LOCATION AND DE…
WHACK A RAT CSS GAME ----------------------------------------------------------------------------------------------------------------- ReadMore: https://dzone.com/articles/css3-games-collection htt…
HTML CSS GREEN COMMENTS NOTEPAD++ ------------------------------------------------------------------------------------------------------------------------- READ MORE: https://www.youtube.com/watch?v=Abqwpg5mp_U…
INSTALL WORD PRESS TEMPLATE Plugins are tools which provide additional functionality to your application. To install a plugin you generally just need to put the plugin file into your 'wp-content/plugins' di…
RELATED POST WIDGET LIST SHAPE ---------------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2013/12/n-relate-pos…
Related PostWidget WithFirst Big Thumbnail ----------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE READ MORE: http://fbgadgets.blogspot.co.u…
How to open a .DLL or .EXE file in Resource Editor READ MORE: ---------------------------------------------------------------------------------------------------------- http://www.solvusoft.com/en/file-extensions/file-extensio…
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE --------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highlight…
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER ------------------------------------------------------------------------------------------------------------------- SYNTAX HIGHLIGHTER LINKS -----------------------------------…
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN NOTE PAD AND SAVE IN HTML FILE -----------…
MAKE DLL FILE AND OPEN IN VISUAL BASIC 2008-2010 READ MORE: ----------------------------------------------------------------------------------------------------------------------- http://www.solvusoft.com/en/file-ex…
Search Engine Optimization Toolkit UN USED CSS IN GOOGLE Free SEO Toolkit Start with the free download, review your website, and make changes fast. The SEO Toolkit with its detailed analysis and search engine friendly suggestion…
JAVA COLOR PICKER WITH jQuery UI Slider - Colorpicker jQuery UI Selectable - Serialize #red, #green, #blue { float: left; clear: left; width: 300px; margin: 15px; } #swatch { width: 1…
BASIC TEXT OR SCROLL BOX OR IMAGE SRC HTML CODES ------------------------------------------------------------------------------------------------------ CODE 1 ------------------------------------------------------------------…
DRAG AND DROP WITH IMAGE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogsp…
USE ARABIC URDU LANGUAGE IN HTML ------------------------------------------------------------------------------------------------------------- Read More: 13:22 USE ARABIC URDU LANGUAGE IN HTML&n…