jqueryui: JqueryUI Dropable

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Droppable</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style type="text/css">
         #draggable-3 { 
           width: 100px; height: 50px; padding: 0.5em; float: left;
           margin: 21px 5px 10px 0; background:#fff;
         }
         #droppable-6 { 
           width: 120px; height: 90px;padding: 0.5em; float: left;background:#333;
      color: #fff; 
           margin: 10px; 
         }
         .active {
            border-color : blue;
            background : grey;
            }  
         .hover {
            border-color : red;
            background : green;
         }

</style>
   <script>
      $(function() {
         $( "#draggable-3" ).draggable();
         $( "#droppable-6" ).droppable({
            activeClass: "active",
            hoverClass:  "hover",
            drop: function( event, ui ) {
               $( this )
              .addClass( "ui-state-highlight" )
              .find( "p" )
              .html( "Dropped!" );
            }
         });
      });
   </script>
</head>
<body>

Monday, 23 February 2015

JqueryUI Dropable

No comments:

Post a Comment