Question

I have developed drag and drop using jquery ui. So if i drag n drop the element over the boundary of the drop box it still takes in the element so is there any way to restrict the boundary region for the drop ?
Screenshot : http://img10.imageshack.us/img10/5662/borderk.jpg

Answer 1

I’m assuming that in your current code you have one element that has a background image.

If you change your html and css to something like this and use the db-inner as the drop area, then this should work.

http://jsfiddle.net/lollero/xTYPP/

HTML:

<div id="DropBox">
    <div id="db-inner"></div>
</div>​

CSS:

#DropBox {
    margin: 20px;
    width: 180px;
    height: 50px;
    background: #e1e1e1 url('http://placekitten.com/g/200/70') no-repeat top left;

    padding: 10px;
}

#db-inner {
    width 100%;
    height: 100%;
    background: #fff;
    opacity: 0.7;
    border: 1px dashed #777;
}
​

To simplify: Parent element adds padding that restricts the inner element dimensions which are defined to be 100%

The idea is that #db-inner would be the drop box element and #DropBox is an extra wrapping element that holds your background image and it just happens to be bigger than the dropbox area.