jquery drag n drop not working please review my code -
I have three buttons and I want to draw it in the droppable div but it is not working. Please review my code and give me the best advice
& lt; body & gt; & Lt; form method = "post" action = "dashboard.expx" id = "form1" & gt; & Lt; Script type = "text / javascript" & gt; . $ ('# Play1') dragable (); $ ('# Yasin2') dragable () .; . $ ('# Page3') Dragable (); . $ ('# Page24') Dragable (); $ ('# DivScene'). Droppable ({drop: function (Event, UI) {var id = $ (ui.draggable) .attr ('id'); Alert (id);}}); & Lt; / Script & gt; & Lt; Div & gt; & Lt; Input type = "submit" name = "btnAddScene" value = "add" id = "btnAddScene" style = "float: correct; height: 26px;" & Gt; & Lt; H1 & gt; View (s) & lt; / H1> & Lt; / Div & gt; & Lt; Div id = "divScene" class = "ui-droppable" style = "border-style: solid; border width: 5px; padding: 20px 20px 20px 20px;" & Gt; & Lt; __ doPostBack ('play1', '') "id =" play1 "class =" ui - "=" play1 "value =" play "onclick =" return false "; type =" ui-draggable " Widget U-State-Default ui-corner-all "title =" Scene "& gt; & Lt; Input type = "button" class = "ui-draggable" name = "yasin2" value = "yasin" onclick = "return false; __ doPostBack ('Yasin 2', '')" id = "yasin 2" square = " UI "-Vidget U-State-Default ui-corner-all" title = "Scene"> Input type = "button" class = "ui-draggable" name = "page3" value = "page" onclick = "Return false; __ doPostBack ('Page 3', '') "id =" page3 "class =" ui-widget u-stat-default ui-corner-all "title =" scene "> gt; input type =" button "class =" ui-draggable "name =" page24 "value =" page2 "onclick =" return false; __ doPostBack ('page24', '') "id =" page24 "class =" ui-widget U-stat-default ui-corner-all "title =" Scene "> & Lt; / Form & gt; & lt; / body & gt; & lt; / html & gt;
First of all, you must include the jQuery and jQuery UI in your page:
& lt; script src =" // ajax.googleapis.com/ajax/libs/jquery/1.11.0 /jquery.min.js"></script>)"> script src = "// ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js">< ; / Script & gt; After that, you should enter your handler $ (function () {...}}; You need to wrap your jQuery code inside; Make sure all your DOM elements are properly loaded before executing your jQuery code:
& lt; link rel = "stylesheet" href = "// ajax.googleapis.com/ajax/libs/jqueryui/110.4/topic/lubness/jquery-ui.css" /> & Lt; Script src = "// ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> & Lt; Script src = "// ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> & Lt; Script & gt; $ (Function () {$ ('# play1') Dragable (); $ ('# Yasin 2') Dragable (); $ ('# Page3') Dragable (); $ ('#' 24 ') Draggable (); $ (' # devisin '). Droppable ({drop: function (event, UI) {var id = $ (ui.draggable) .attr (' id '); alert (id);} });}); & Lt; / Script & gt;
Comments
Post a Comment