two jquery function not working

Question

I have below jquery function, but only resizable working not draggable. If I remove the resizable, then only draggable work.

function drag(obj) {
        $(function () {
            $(obj).draggable({containment: "#design"});
        });
        $(function () {
            $(obj).resizable({containment: "#design"});
        });
    }

HTML is:

<img width="150px" src="abc.png" ondrag="drag(this)" onclick="drag(this)" id="imgs" class="ui-widget-content">

I want that both resizable and draggable work. How can I do that ?

Don't use `on*` attributes. Use [`addEventListener`](https://developer.mozilla.org/pl/docs/Web/API/Element/addEventListener). See: http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick — Michał Perłakowski, Dec 12 '15 at 15:41

score 0 · Accepted Answer · answered Dec 12 '15 at 15:35

When you make an element resizable it wraps that element in a div. For the draggable to work on the same element, you then need to target it's new parent.

$('img').resizable({containment: "#design"});
$('img').parent().draggable({containment: "#design"});

See: https://jsfiddle.net/x30zLdeg/

two jquery function not working

1 Answers1