search

RohitDhankar / DigitalCognition_OldRepo_ARCHIVED

DC is being developed to be a generic BI tool. Product preview here :- https://www.youtube.com/channel/UC9J9N9CNv15s9U9Aejpza6g/videos
2 stars 1 forks source link

On MODAL CLOSE – draggable MODAL to return to same POSITION from where it started #13

Open RohitDhankar opened 5 years ago

RohitDhankar commented 5 years ago

ideally On MODAL CLOSE – draggable MODAL to return to same POSITION from where it started

RohitDhankar commented 5 years ago

If there is a fixed position given in the CSS Class like so -

https://github.com/RohitDhankar/DigitalCognition/blob/11e9138c0baabf544d13c833900b020b499b5b8f/dc_dash/templates/dc_dash/eda_sidebar.html#L350

/* modal_bokeh_3_content == Content/Box */
.modal_bokeh_3_content {
  position: fixed;
  width: 250px; 
  height: 250px;
  margin-left: 820px;
  margin-top: 320px;
  background-color: #fefefe;
  padding: 0;
  border: 1px solid #888;
  /* DHANKAR In the CENTER and WIDTH as % of the SCREEN  */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

We can drag modal and release - it reverts back to the initial position , Position_1. Required effect is that Modal moves to another position , Position_2 , and stays there indefinitely . If user refreshes the page - then it returns to its initial position , Position_1. If user closes the Modal at Position_2 and again Hovers or Clicks the trigger for Modal display the Modal should reappear at Position_2 and not at Position_1 , which is the case now.

Have tried a few things - am not getting the exact effect desired - needs further reading . Some pointers below :-

https://stackoverflow.com/questions/19971612/reset-jquery-draggable-object-to-original-position-by-clicking-a-button

https://stackoverflow.com/questions/15193640/jquery-ui-draggable-reset-to-original-position http://jsfiddle.net/ExplosionPIlls/wSLJC/ https://github.com/search?l=HTML&p=2&q=modal+.css%28%27left%27%29%2C+draggable&type=Code https://github.com/SachinArora19/Hello-World/blob/a6a539c596c08b54590183236495a41fc5cec250/satyam_main.html#L229 https://github.com/SachinArora19/Hello-World/blob/48e1c3be2e4d7324b1af5526218fa5d5ad382850/final.html#L261 https://github.com/exmorse/ARMurriMurder/blob/52e6a56e9409c7ac3b914d7ef163540b82b2da47/demo.html https://github.com/Coralma/ng-bootstrap-draggable-dialog/blob/5b6165fe2c0dee75745af9ebb774b8319006108e/example/index.html#L31   https://stackoverflow.com/questions/20306204/using-queryselector-with-ids-that-are-numbers   https://stackoverflow.com/questions/15551697/destroy-jquery-draggable/15551781#15551781 https://stackoverflow.com/questions/5735270/revert-a-jquery-draggable-object-back-to-its-original-container-on-out-event-of/51683535