On Mon, Jul 1, 2013 at 1:45 AM, Girish Venkatachalam
<[email protected]> wrote:
> I will now get to the jQuery UI project which adds a lot of
> interesting functionality to the jQuery core engine.
>
> This is a demo I copy pasted from it.
>
> http://awrdev.g3tech.in/jquery_tutorials/ui-dragdrop.html
Great one again!
One issue though: I can drag any box anywhere; that means, If I get
the upper box into lower drop zone; it is achievable; though lower
drop zone is not showing me "Dropped" message.
That's true for other one as well.
>
> Please look at the source.
>
> <!doctype html>
> <html lang="en">
> <head>
> <meta charset="utf-8">
> <title>jQuery UI Droppable - Visual feedback</title>
> <link rel="stylesheet" href="/css/jquery.ui.all.css">
> <link rel="stylesheet" href="/css/demos.css">
>
> <script src="/jquery/jquery.min.js"></script>
> <script src="/jquery/jquery.ui.core.js"></script>
> <script src="/jquery/jquery.ui.widget.js"></script>
> <script src="/jquery/jquery.ui.mouse.js"></script>
> <script src="/jquery/jquery.ui.draggable.js"></script>
> <script src="/jquery/jquery.ui.droppable.js"></script>
> <style>
> #draggable, #draggable2 { width: 90px; height: 90px; padding:
> 0.5em; float: left; margin: 10px 10px 10px 0; }
> #droppable, #droppable2 { width: 120px; height: 120px;
> padding: 0.5em; float: left; margin: 10px; }
> h3 { clear: left; }
> </style>
> <script>
> $(function() {
> $( "#draggable" ).draggable();
> $( "#droppable" ).droppable({
> hoverClass: "ui-state-active",
> drop: function( event, ui ) {
> $( this )
> .addClass( "ui-state-highlight" )
> .find( "p" )
> .html( "Dropped!" );
> }
> });
>
> $( "#draggable2" ).draggable();
> $( "#droppable2" ).droppable({
> accept: "#draggable2",
> activeClass: "ui-state-hover",
> drop: function( event, ui ) {
> $( this )
> .addClass( "ui-state-highlight" )
> .find( "p" )
> .html( "Dropped!" );
> }
> });
> });
> </script>
> </head>
> <body>
>
> <h3>Feedback on hover:</h3>
>
> <div id="draggable" class="ui-widget-content">
> <p>Drag me to my target</p>
> </div>
>
> <div id="droppable" class="ui-widget-header">
> <p>Drop here</p>
> </div>
>
> <h3>Feedback on activating draggable:</h3>
>
> <div id="draggable2" class="ui-widget-content">
> <p>Drag me to my target</p>
> </div>
>
> <div id="droppable2" class="ui-widget-header">
> <p>Drop here</p>
> </div>
>
> <div class="demo-description">
> <p>Change the droppable's appearance on hover, or when the droppable
> is active (an acceptable draggable is dropped on it).
> Use the <code>hoverClass</code> or <code>activeClass</code> options
> to specify respective classes.</p>
> </div>
> </body>
> </html>
>
> -Girish
>
> --
> Gayatri Hitech
> http://gayatri-hitech.com
> _______________________________________________
> ILUGC Mailing List:
> http://www.ae.iitm.ac.in/mailman/listinfo/ilugc
> ILUGC Mailing List Guidelines:
> http://ilugc.in/mailinglist-guidelines
--
-----------------
Kind Regards,
Zico
Lead Support Engineer
Gluu, Inc.
http://www.gluu.org/
[email protected]
office: +1 646-810-8761
mobile: +880 172-8029766
schedule your support conf call here:
http://gluusupport.youcanbook.me/
_______________________________________________
ILUGC Mailing List:
http://www.ae.iitm.ac.in/mailman/listinfo/ilugc
ILUGC Mailing List Guidelines:
http://ilugc.in/mailinglist-guidelines
