javascript - Problems with jQuery Resizable & Draggable -
i'm trying build simple photo editing module using jquery ui on our website's products page, i'm having serious problem getting thing done.
issue i'm facing in first load works fine. when load image again, draggable stop working, means dragging works drop wont. cannot drop image when start dragging it. , resize handle stays same place in first image.
below code (some of it, reckon important)
html
<div id="pp-dlite-area"> <div id="dl-canvas"> <div class="dl-design-mask"> </div> <div class="dl-photo-wrap"> <img id="pp-dlite-photo-mask1" class="dl-photo" /> <img id="pp-dlite-photo-image1" class="dl-photo-img dl-linked" /> <img id="pp-dlite-photo-trans1" class="dl-photo-trans dl-linked" /> <div class="dl-photo-trap dl-linked"> </div> </div> </div> javascript
.... .... //start resize , drag_drop $j(".dl-photo").resizable({ aspectratio: true, resize: function () { $j(this).parent().find('.dl-linked').width($j(this).width()); $j(this).parent().find('.dl-linked').height($j(this).height()); $j(this).parent().find('.dl-photo-trans').css('zindex', $j(this).parent().find('.dl-photo-trap').css('zindex')); }, stop: function () { $j(this).parent().find('.dl-photo-trans').css('zindex', $j(this).parent().find('.dl-photo').css('zindex')); } }) .parent().draggable({ containment: "#dl-canvas", drag: function () { $j(this).parent().find('.dl-linked').css('top', $j(this).css('top')); $j(this).parent().find('.dl-linked').css('left', $j(this).css('left')); $j(this).parent().find('.dl-photo-trans').css('zindex', $j(this).parent().find('.dl-photo-trap').css('zindex')); }, stop: function () { $j(this).parent().find('.dl-linked').css('top', $j(this).css('top')); $j(this).parent().find('.dl-linked').css('left', $j(this).css('left')); $j(this).parent().find('.dl-photo-trans').css('zindex', $j(this).parent().find('.dl-photo').css('zindex')); } }); $j(".dl-photo-trans").draggable({ containment: "#dl-canvas" }); $j(".dl-photo-img").draggable({ containment: "#dl-canvas" }); ...... ...... ..... remember works fine first image load, stuff doesn't refreshed when images loading after :(
please since i'm working on issue last 2 days trying many different stuff, unsuccessful.
Comments
Post a Comment