I am working on a project which has 2 screens.
- This is the page where I want to display different div or elements
- This is a configuration page which I want to edit and define whatever elements should be displayed on page 1.
Once an element is dragged in screen 2 from top div to the empty placeholder, I want to display a div on page 1. I am trying different methods but no luck. Drag and drop is working fine but the functionality part is not working.
Here is the code for drag and drop that I am using. Need help with showing/hiding an element on page 1 based on the page 2 settings.
<!doctype html>
jQuery UI Sortable - Connect lists #sortable1, #sortable2 { border: 1px solid #eee; width: 142px; min-height: 20px; list-style-type: none; margin: 0; padding: 5px 0 0 0; float: left; margin-right: 10px; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 21
- Item 22
- Item 23
- Item 24
- Item 25