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++
?
+
X
Recommended for you
Loading..
Related Post for DRAG AND DROP IMAGES ABOVE BOX TO BELOW BOX WITH JQUERY
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER ------------------------------------------------------------------------------------------------------------------- SYNTAX HIGHLIGHTER LINKS -----------------------------------ā¦
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ā¦
IMAGE SCROLL BOX WITH MOUSE CURSOR ----------------------------------------------------------------------------------------------------- SAVE AS BELOW CODE IN HTML PAGE READ MORE: http://www.freebits.co.uā¦
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/flaā¦
HOW TO GET MALWARE ADD POPUP WITHOUT SOFTWARE --------------------------------------------------------------------------------------------------------- STEP 1: GO TO WINDOW TASK MANAGER STEP 2: OPEN FILE LOCATION AND DEā¦
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ========================================================================= COPY AND PASTE BELOW CODE IN BLOGGER TEMPLATE http://fbgadgets.blogspot.co.uk/2014/08/syntax-hā¦
POST DATE HEADER IN BLOG -------------------------------------------------------------------------------------------------------- DEFAULT LANGUAGE SETTING READ MORE: POST DATE TUMBNAIL IN BLOG http://fā¦
How to open a .DLL or .EXE file in Resource Editor READ MORE: ---------------------------------------------------------------------------------------------------------- http://www.solvusoft.com/en/file-extensions/file-extensioā¦
WHACK A RAT CSS GAME ----------------------------------------------------------------------------------------------------------------- ReadMore: https://dzone.com/articles/css3-games-collection httā¦
AUTOMATION ANY WEBSITES ------------------------------------------------------------------------------------------------------ READ MORE: https://www.automationanywhere.com/webdataext?r=google&w=ā¦
BOOTSNIPP LOGIN SIGNUP FORM ----------------------------------------------------------------------------------------------------------- READ MORE: http://bootsnipp.com/tags/login http://bootsnipp.com/sā¦
HTML CSS GREEN COMMENTS NOTEPAD++ ------------------------------------------------------------------------------------------------------------------------- READ MORE: https://www.youtube.com/watch?v=Abqwpg5mp_Uā¦
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE --------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highlightā¦
EDIT IMAGE IN NOTEPAD++ ---------------------------------------------------------------------------------------------------------------------- https://www.google.co.uk/search?q=edit+picture+in+noā¦
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ā¦
WORD PRESS PARTS -------------------------------------------------------------------------------------------------------- Read More: ----------------------------------ā¦
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ----------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highlā¦
RELATED POST WIDGET LIST SHAPE ---------------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2013/12/n-relate-posā¦
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ā¦
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ā¦
DRAG AND DROP WITH IMAGE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspā¦
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST --------------------------------------------------------------------------------------------------------------------- NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST https://ā¦
POST DATE THUMBNAIL IN BLOG -------------------------------------------------------------------------------------------------------- READ MORE: 11:02 POST DATE THUMBNAIL IN BLOG HD Jan 2ā¦
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:/ā¦
SCREEN TO GIF ------------------------------------------------------------------------------------------------------------------ Read More: 3:30 PDF HTML IMAGE CONVERTER HDā¦
ONLINE ZIP OPNER ---------------------------------------------------------------------------------------------------------- FIND THIS RED WORD IN GOOGLE online zip opener READ MORE: http://onlā¦
Related PostWidget WithFirst Big Thumbnail ----------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE READ MORE: http://fbgadgets.blogspot.co.uā¦
SYNTAX HIGHLIGHTER ON LINE FOR BLOGGER ---------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uā¦
MAKE DLL FILE AND OPEN IN VISUAL BASIC 2008-2010 READ MORE: ----------------------------------------------------------------------------------------------------------------------- http://www.solvusoft.com/en/file-exā¦
NOTEPAD++ REMOVE UNWANTED LINES ------------------------------------------------------------------------------------------------------------------------------------------------------------ STEP NO : 1 1- CTā¦
HTML SYNTAX HIGHLIGHTER ----------------------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------ā¦
FANCY BOX JS FIDDLE - jsFiddle demo //![CDATA[ $(window).load(function(){ $(document).ready(function() { $(".fancybox").fancybox({ openEffect: 'none', closeEffeā¦
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.