限制使用javascript在特定div窗口上的html内部对象拖动

Question

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.

Answer 1

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/