Drag and drop to hide and display a block

I am working on a project which has 2 screens.

  1. This is the page where I want to display different div or elements
  2. 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