All geek questions in one place

Inactive jQuery user interface

I am trying to create a form building tool. Everything worked perfectly. I was able to drag my first icon and drop it onto the body of the main shape, just fine. When I do this, it adds a new panel to the div class. I also make the panel inaccessible, but when I try to reset something, nothing happens. If I hardcode the div, it works fine, however, when I add the div, it doesn't. I have a lot of problems with this.

Here is my code:

<html> <head> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script> <style type="text/css"> #toolbox { width: 100%; height: 200px; position: fixed; top: 0; left: 0; background-color: #666666; z-index: 2; } .icon { padding-top: 20px; padding-left: 20px; text-align: center; display: table-cell; } #formbuilder { width: 100%; position: absolute; top: 200px; left: 0px; bottom: 0px; padding-top: 5%; background-color: orange; opacity: 0.4; overflow: visible; } .panel { margin: 0 auto; margin-bottom: 20px; height: 150px; width: 150px; background-color: blue; opacity: 0.4; } </style> </head> <body> <script type="text/javascript"> function formDropHandler(event, ui) { if(ui.draggable.hasClass("pan")) { var form = $("#formbuilder"); form.append('<div class="panel ui-droppable"></div>'); $(".panel").droppable({ drop: panelDropHandler }); } } function panelDropHandler(event, ui) { if(ui.draggable.hasClass("tab")) alert("TRUE"); } $(document).ready(function() { var icons = $('.icon'); $('.icon').draggable({ cursor: 'move', helper: 'clone', revert: true }); $("#formbuilder").droppable({ drop: formDropHandler }); $(".panel").live('mouseover',function(){ $(".panel").droppable({ drop: panelDropHandler }); }); }); </script> <div id="toolbox"> <div class="icon pan">Panel<br /><img src="panel.png" alt="PANEL.PNG" /></div> <div class="icon tab">Table<br /><img src="table.png" alt="TABLE.PNG" /></div> </div> <div id="formbuilder"> <div class="panel"></div> <div class="panel"></div> </div> </body> </html>
+4
source share
2 answers

Try it. Both drops are working now. The panel falls on the form designer, and the table falls on the panel (even on newly created ones). Just remember that formbuilder is just the area that is colored in the toolbar section. Thus, the further you go down, you will not be able to drop anything unless you scroll through the backup. But this is just a CSS question, change position:absolute to position:relative and it should grow along with the panels.

 function formDropHandler(event, ui) { if (ui.draggable.hasClass("pan")) { var form = $("#formbuilder"); form.append('<div class="panel ui-droppable"></div>'); } else if (ui.draggable.hasClass("tab")){ alert("TRUE"); } } $(document).ready(function() { var icons = $('.icon'); $('.icon').draggable({ cursor: 'move', helper: 'clone', revert: true }); $("#formbuilder").live('mouseover', function() { $("#formbuilder").droppable({ drop: formDropHandler }); }); $(".panel").live('mouseover', function() { $(".panel").droppable({ drop: formDropHandler }); }); });
+1
source

Only those elements that exist when calling .droppable () were made "dropables". Since you ran it once, in doc ready, and then never again, no elements that are added to the page after the fact are just controls.

You will need to initialize each new addition. You can do this quickly bypassing your append statement.

 var form = $("#formbuilder"); $('<div class="panel ui-droppable"></div>') .appendTo(form) .droppable({drop:panelDropHandler});
+1
source

Source: https://habr.com/ru/post/1386208/

More articles:


All Articles