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.

http://jsfiddle.net/L73T5/10/

html

<div id='background'>

</div>


<div id="wrapper">
    <img id='viewer' src='http://i60.tinypic.com/1191gxt.jpg' />
</div>

css

#background{
    background: url('http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg') no-repeat center center fixed;
    width: 100%;
    height: 100%;
    position:fixed;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    z-index: -1;
}

#wrapper{
    width: 80%;
    height: 80%;
}

#viewer{      
    cursor: pointer;
}

js

$( "#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!

Answers


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.

CSS:

#background{
   // existing styles

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

#wrapper{
 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.