How to set an drag and drop element in my case

I want to drag an element in my app and would like to create a restricted area so the element can only be dragged within a certain area.

I have something like this.


<div id='background'>


<div id="wrapper">
    <img id='viewer' src='' />


    background: url('') no-repeat center center fixed;
    width: 100%;
    height: 100%;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    z-index: -1;

    width: 80%;
    height: 80%;

    cursor: pointer;


$( "#viewer" ).draggable({containment: "#wrapper", opacity: 0.65 });

I want to restrain the highlights image being dragged inside the test image area (can't drag it to the white background) and I need it to be responsive.

Is this possible? Thanks a lot!


Here is one solution that may work for you.

Fiddle Demo

You need to give your #wrapper a height and then position the #background down an equal amount. That should keep the two from overlapping. Also I found removing the fixed off the background style let it re-size correctly.


   // existing styles

   background: url('http://...') no-repeat top center;
   top: 50px;

 width: 100%;
 height: 45px;

Need Your Help

UIAlertView delayed or not showing up when calling methods from another view

ios objective-c uialertview

UIAlertView delayed or not showing up when pass another view. Any help would be greatly appreciated.

XML parsing in C#. Issue with Descendants

c# xml xml-parsing xmlreader

I have an XML string that needs parsing.