im having trouble in jquery's drag , drop functionality, have following code, drags element not acceptable droppable element, can please point out whats wrong script?thankyou
<html> <head> <title>crm</title> <link rel="stylesheet" href="style/style.css" type="text/css"> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> <script> $(document).ready(function(){ $(".dragable").draggable({ cancel:"a.ui-icon", revert:true, helper:"clone", cursor:"move", revertduration:0 }); $('.droppable').droppable({ accept: ".dragable", activeclass: "ui-state-highlight", drop: function( event, ui ) { // clone item retain in original "list" var $item = ui.draggable.clone(); $(this).addclass('has-drop').html($item); } }); }); </script> </head> <body> <div class="main-container"> <div class="wrapper"> <div class="tb-head"> <div class="target"> <span class="target-span">target</span> </div> <div class="user1"> <span class="user1-span">user1</span> </div> <div class="user2"> <span class="user2-span">user2</span> </div> <div class="user3"> <span class="user3-span">user3</span> </div> <div class="user4"> <span class="user4-span">user4</span> </div> <div class="clear"></div> </div> <div class="tb-body"> <div class="inner-target"> <div class="dragable"> <span class="targetinn-span">target lead</span> </div> <div class="dragable"> <span class="targetinn-span">assign1 lead</span> </div> <div class="dragable"> <span class="targetinn-span">assign2 lead</span> </div> <div class="dragable"> <span class="targetinn-span">assign3 lead</span> </div> </div> <div class="inner-user1"> <div class="droppable"> <span class="user1inn-span"></span> </div> </div> <div class="inner-user2"> <div class="droppable"> <span class="user2inn-span"></span> </div> </div> <div class="inner-user3"> <div class="droppable"> <span class="user3inn-span"></span> </div> </div> <div class="inner-user4"> <div class="droppable"> <span class="user4inn-span"></span> </div> </div> <div class="clear"></div> </div> </div> </body> </html>
i think code fine.just give width , height droppable.
<html> <head> <title>crm</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> <script> $(document).ready(function(){ $(".dragable").draggable({ cancel:"a.ui-icon", revert:true, helper:"clone", cursor:"move", revertduration:0 }); $('.droppable').droppable({ accept: ".dragable", activeclass: "ui-state-highlight", drop: function( event, ui ) { // clone item retain in original "list" var $item = ui.draggable.clone(); $(this).addclass('has-drop').html($item); } }); }); </script> <style> .droppable{ width:200px; height:200px; border: 1px solid black; } </style> </head> <body> <div class="main-container"> <div class="wrapper"> <div class="tb-head"> <div class="target"> <span class="target-span">target</span> </div> <div class="user1"> <span class="user1-span">user1</span> </div> <div class="user2"> <span class="user2-span">user2</span> </div> <div class="user3"> <span class="user3-span">user3</span> </div> <div class="user4"> <span class="user4-span">user4</span> </div> <div class="clear"></div> </div> <div class="tb-body"> <div class="inner-target"> <div class="dragable"> <span class="targetinn-span">target lead</span> </div> <div class="dragable"> <span class="targetinn-span">assign1 lead</span> </div> <div class="dragable"> <span class="targetinn-span">assign2 lead</span> </div> <div class="dragable"> <span class="targetinn-span">assign3 lead</span> </div> </div> <div class="inner-user1"> <div class="droppable"> <span class="user1inn-span"></span> </div> </div> <div class="inner-user2"> <div class="droppable"> <span class="user2inn-span"></span> </div> </div> <div class="inner-user3"> <div class="droppable"> <span class="user3inn-span"></span> </div> </div> <div class="inner-user4"> <div class="droppable"> <span class="user4inn-span"></span> </div> </div> <div class="clear"></div> </div> </div> </body> </html>
Comments
Post a Comment