Mark accepted object : UI Droppable « jQuery « JavaScript DHTML






  1. JavaScript DHTML
  2. jQuery
  3. UI Droppable

Mark accepted object

 <html lang="en"> <head> <title></title> <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/ui/ui.core.js"></script> <script type="text/javascript" src="js/ui/ui.draggable.js"></script> <script type="text/javascript" src="js/ui/ui.droppable.js"></script> <link type="text/css" href="js/demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { $(".drag").draggable(); var dropOpts = { accept: "#drop1", activeClass: "activated" }; $("#target").droppable(dropOpts); }); </script> </head> <body> <div class="drag" id="drop1">drop1</div> <div class="drag" id="drop2">drop2</div> <div id="target">target</div> </body> </html>








Related examples in the same category

1.jQuery UI Droppable - Accept Demo
2.jQuery UI Droppable - Simple photo manager
3.jQuery UI Droppable - Prevent propagation
4.jQuery UI Droppable - Revert draggable position
5.jQuery UI Droppable - Visual feedback
6.Droppable object
7.Get relative and absolute position of the dropped object
8.Mark active class
9.Droppable accepted function
10.Drag and drop events: activate, deactivate, drop, out, over
11.Drop to different objects and get their id
close