CODEWITHSUNDEEP
javascriptdrag
popoydotcom
popoydotcom

Reputation: 3

Restrict dragging of object inside html on specific div window using javascript

I have used this script and I was wondering if it's possible to prevent the dragging of image when it is at the edge of the div window inside html?

Here is the link:

<https://jsfiddle.net/61t6nn4a/2/>

Any tips would be awesome thank you.

Upvotes: 0

Views: 1166

Answers (1)

Rust in Peace
Rust in Peace

Reputation: 176

You can make your life easier by using jQuery.

jQueryUI has a draggable functionnality, check the documentation here : http://api.jqueryui.com/draggable/

HTML:

<div class="container">
    <img src="http://www.zpixel.com/staging/test/image.png" class="dragme">
</div>

JS:

$(".dragme").draggable({
    containment: ".container"
});

Here is the JSFiddle : https://jsfiddle.net/v28r9v3r/1/

Upvotes: 2

Related Questions