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

AUTOMATION ANY WEBSITES ------------------------------------------------------------------------------------------------------ READ MORE: https://www.automationanywhere.com/webdataext?r=google&w=…
Sprite Sheet Animation ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
BLOGGER GRID LIST SHOPPING CART TEMPLATE ---------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE READ MORE: http://fbgadgets.blogspot.co.u…
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…
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…
FANCY BOX JS FIDDLE - jsFiddle demo //![CDATA[ $(window).load(function(){ $(document).ready(function() { $(".fancybox").fancybox({ openEffect: 'none', closeEffe…
Dino Pairs Matching Game ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
RELATED POST WIDGET LEFT TO RIGHT #related-posts h2{ background:#111111; border-top-color:#63C4F1; border-top-style:solid; border-top-width:3px; color:#FFFFFF; font-family:Oswald; font-size:16px; font-stretch:…
GENERIC POST TITLE UNDER AUTO READ POST IMAGE TEMPLATE ----------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE -----------------------------------------------…
DINO PAIRS MATCHING GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot…
IMAGE SCROLL BOX WITH MOUSE CURSOR ----------------------------------------------------------------------------------------------------- SAVE AS BELOW CODE IN HTML PAGE READ MORE: http://www.freebits.co.u…
GENERIC BLOGGER TEMPLATE WITH CSS HEADER IMAGE AND PAGINATION ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE READ MORE BUTTON WITHOUT VARIABLE COD…
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…
BASIC TEXT OR SCROLL BOX OR IMAGE SRC HTML CODES ------------------------------------------------------------------------------------------------------ CODE 1 ------------------------------------------------------------------…
EDIT IMAGE IN NOTEPAD++ ---------------------------------------------------------------------------------------------------------------------- https://www.google.co.uk/search?q=edit+picture+in+no…
PAGINATION IN BLOG ---------------------------------------------------------------------------------------------------------- 1- FIND BODY CLOSE TAG AND REPLACE WITH BELOW CODE READ MORE: http:/…
HOW TO GET MALWARE ADD POPUP WITHOUT SOFTWARE --------------------------------------------------------------------------------------------------------- STEP 1: GO TO WINDOW TASK MANAGER STEP 2: OPEN FILE LOCATION AND DE…
RECENT OR FEATURED POST SLIDER AFTER FOOTER ------------------------------------------------------------------------------------------------------------- COPY AND POST CODE READ MORE: http://fbgadgets.blogspot.co.uk/2…
DRAG AND DROP IMAGES ABOVE BOX TO BELOW BOX WITH JQUERY ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogs…
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ----------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highl…
How to open a .DLL or .EXE file in Resource Editor READ MORE: ---------------------------------------------------------------------------------------------------------- http://www.solvusoft.com/en/file-extensions/file-extensio…
DRAG AND DROP HTML GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.c…
Drag and Drop Practice Game With Image ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.c…
DRAG AND DROP HTML GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE:…
GSM Multi-Function Door Alarm This discreet device performs two separate and essential functions as both a door alarm and a remote listening device. A complete security and surveillance package. To use th…
Drag and Drop Practice Game With Image ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
ONLINE ZIP OPNER ---------------------------------------------------------------------------------------------------------- FIND THIS RED WORD IN GOOGLE online zip opener READ MORE: http://onl…
RECAPTCHA KEY CONTCAT FORM FOR BLOGGER ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE READMORE: http://kontactr.com/ https…
SYNTAX HIGHLIGHTER ON LINE FOR BLOGGER ---------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.u…
BLOG FILE HOSTING GOOGLE PROJECT WITH TORTOISE SVN SOFTWARE EDIT HTML PAGE IN GOOGLE - YouTube ▶ 4:19 https://www.youtube.com/watch?v=Q4yfMqPFSYE 16 mins ago - Uploaded by SAVE MONEY http://fbgadgets.blogspot.co.uk/2016/09/…
DRAG AND DROP HTML GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
DRAG AND DROP IMAGES ABOVE BOX TO BELOW BOX WITH JQUERY ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
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…
CARD GAMES WITH DRAG AND DROP WITH JQUERY AND HTML ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
HTML SYNTAX HIGHLIGHTER ----------------------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------…
DRAG AND DROP WITH JQUERY AND HTML TUTORIAL ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.…
DRAG AND DROP HTML GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogs…
GOOGLE APPS INVENTOR CREATE OR DOWNLOAD ---------------------------------------------------------------------------------------------------------- READ MORE: --------------------------------------…
WORD PRESS PARTS -------------------------------------------------------------------------------------------------------- Read More: ----------------------------------…
DRAG AND DROP HTML GAME ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.c…
UnityAssetsExplorer Read More: https://yadi.sk/d/pQCvUUC02D3aY …
PADDING BUTTON ------------------------------------------------------------------------------------------------------------ READ MORE: http://www.w3schools.com/css/css_padding.asp ----------…
Platinum Arts Sandbox Free 3D Game Maker ----------------------------------------------------------------------------------------------------- READ MORE: ------------------------------------------------------…
GOOGLE MENU CODE ------------------------------------------------------------------------------------------------------------------ GOOGLE MENU CODE: ---------------------------------------…
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE --------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highlight…
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ========================================================================= COPY AND PASTE BELOW CODE IN BLOGGER TEMPLATE http://fbgadgets.blogspot.co.uk/2014/08/syntax-h…
DRAG AND DROP PRACTICE GAME WITH IMAGE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspot.c…
GOOGLE IMAGE HOSTING BY PICSA -------------------------------------------------------------------------------------------------------- READ MORE: -----------------------------------------------…
DRAG AND DROP PRACTICE GAME WITH IMAGE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspo…