JQuery Rotate,Resize,Drag together on an element

<div class=”dragImg”>
<img class=”img” src=”http://www.thumbshots.com/Portals/0/Images/Feature%20TS%201.jpg”&gt; <span id=”rotate”>Rotate</span>

</img>
</div>
<div id=”dropHere”></div>

$(function () {
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: “all”,
autoHide: true
};
$(“.dragImg”).draggable({
helper: “clone”,
//Create counter
start: function () {
counts[0]++;
}
});

$(“#dropHere”).droppable({
drop: function (e, ui) {
if (ui.draggable.hasClass(“dragImg”)) {
var the_div = $(ui.helper).clone()
$(this).append(the_div);

//Pointing to the dragImg class in dropHere and add new class.
the_div.addClass(“item-” + counts[0]);
the_div.find(‘img’).addClass(“imgSize-” + counts[0]);

the_div.find(‘img’).addClass(“mainTarget-” + counts[0]);
the_div.find(‘span’).attr(“id”, “target-” + counts[0]);
the_div.find(‘img’).attr(“id”, “mainTarget-” + counts[0]);

//Remove the current class (ui-draggable and dragImg)
the_div.find(‘img’).removeClass(“dragImg ui-draggable ui-draggable-dragging”);

$(“.item-” + counts[0]).dblclick(function () {
$(this).remove();
});
make_draggable($(“.item-” + counts[0]));
$(“.imgSize-” + counts[0]).resizable(resizeOpts);
}

$(“#target-” + counts[0]).mousedown(function (e) {
var item_target = $(‘.item-‘ + $(this).attr(‘id’).replace(‘target-‘, ”));
item_target.draggable(‘disable’);
item_target.removeClass(“dragImg ui-draggable ui-draggable-dragging ui-state-disabled”);
});

}

});

var zIndex = 0;

function make_draggable(elements) {
elements.draggable({
containment: ‘parent’,
start: function (e, ui) {
ui.helper.css(‘z-index’, ++zIndex);
},
stop: function (e, ui) {}
});
}

});

//Allow image to be rotated.
var dragging = false;
console.log($(‘[id^=target-]’))
var target = $(‘[id^=target-]’);
var mainTarget = $(‘[id^=mainTarget-]’);
var rotation_target;

$(document).mousemove(function (e) {
if (dragging) {

var mainTarget = $(‘.mainTarget-‘ + rotation_target.attr(‘id’).replace(‘target-‘, ”)).parent();
console.log(mainTarget)
var offset = mainTarget.offset();
var center_x = (offset.left) + (mainTarget.width() / 2);
var center_y = (offset.top) + (mainTarget.height() / 2);
var mouse_x = e.pageX;
var mouse_y = e.pageY;
var radians = Math.atan2(mouse_x – center_x, mouse_y – center_y);
var degree = (radians * (180 / Math.PI) * -1) + 120;
mainTarget.css(‘-moz-transform’, ‘rotate(‘ + degree + ‘deg)’);
mainTarget.css(‘-moz-transform-origin’, ‘50% 50%’);
mainTarget.css(‘-webkit-transform’, ‘rotate(‘ + degree + ‘deg)’);
mainTarget.css(‘-webkit-transform-origin’, ‘50% 50%’);
mainTarget.css(‘-o-transform’, ‘rotate(‘ + degree + ‘deg)’);
mainTarget.css(‘-o-transform-origin’, ‘50% 50%’);
mainTarget.css(‘-ms-transform’, ‘rotate(‘ + degree + ‘deg)’);
mainTarget.css(‘-ms-transform-origin’, ‘50% 50%’);
}
});
$(document).mouseup(function () {
dragging = false
$(“[class^=item]”).draggable(‘enable’);
})
$(document).on(‘mousedown’, ‘[id^=target-]’, function () {
dragging = true
rotation_target = $(this);
})

#dropHere {
width:400px;
height: 400px;
border: dotted 1px black;
}

img, span{
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s