DRAG AND DROP WITH JQUERY AND HTML TUTORIAL

Thursday, 4 September 2014

DRAG AND DROP WITH JQUERY AND HTML TUTORIAL

DRAG AND DROP WITH JQUERY AND HTML TUTORIAL

<!doctype html>
<html lang=en>
<head>
<title>Handling Drag Stop Events</title>
<style>#makeMeDraggable{width:300px;height:300px;background:red}</style>
<script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js></script>
<script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js></script>
<script type=text/javascript>$(init);function init(){$("#makeMeDraggable").draggable({cursor:"move",containment:"document",stop:handleDragStop})}function handleDragStop(b,c){var d=parseInt(c.offset.left);var a=parseInt(c.offset.top);alert("Drag stopped!\n\nOffset: ("+d+", "+a+")\n")};</script>
</head>
<body>
<div class=wideBox>
<h1>Drag-and-Drop with jQuery: Your Essential Guide</h1>
<h2>Handling Drag Stop Events</h2>
</div>
<div id=content>
<div id=makeMeDraggable> </div>
</div>
</body>
</html>

Related Post for DRAG AND DROP WITH JQUERY AND HTML TUTORIAL

JS IMAGE SCROLLER -------------------------------------------------------------------------------------------------------------- JS IMAGE SCROLLER CODE image scroller https://amazingcarousel.com…
DROP DOWN MENU EXAMPLES --------------------------------------------------------------------------------------- USE THIS CODE short code css menu Different Color for Menu Tabs ----------------------…
NOTEPAD++ REMOVE UNWANTED LINES ------------------------------------------------------------------------------------------------------------------------------------------------------------ STEP NO : 1 1- CT…
CSS SLIDER WITHOUT JS ----------------------------------------------------------------------------------------------------------- ReadMore: http://cssslider.com/non-jquery-carousel-7.html SAVE …
BLOCK JAVA SCRIPT BY GOOGLE CHROME -------------------------------------------------------------------------------------------------------------------------------------- java file block in google chrome h…
Bread Crumb Navigation Menu Guardian Style --------------------------------------------------------------------------------- CODE BELOW ---------------------------------------------------------------------------------…
AUTO CSS JS SLIDER WITH ARROW BULLET ------------------------------------------------------------------------------------------------------- BX SLIDER CODE: READ MORE: BX SLIDER IN BLOGGER TEMPALTE - You…
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST --------------------------------------------------------------------------------------------------------------------- NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST https://…
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN NOTE PAD AND SAVE IN HTML FILE -----------…
SCREEN TO GIF ------------------------------------------------------------------------------------------------------------------ Read More: 3:30 PDF HTML IMAGE CONVERTER HD…
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER ------------------------------------------------------------------------------------------------------------------- SYNTAX HIGHLIGHTER LINKS -----------------------------------…