Hi i am using jquery resizable, rotatable() [ https://cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.min.js] in my project .
So when this function called i get handles to rotate and resize the div.
$( function() { var inputLocalFont = document.getElementById("user_file"); inputLocalFont.addEventListener("change",previewImages,false); function previewImages(){ var fileList = this.files; var anyWindow = window.URL || window.webkitURL; for(var i = 0; i < fileList.length; i++){ var objectUrl = anyWindow.createObjectURL(fileList[i]); $('.new-multiple').append('<div class="img-div"><img src="' + objectUrl + '" class="newly-added" /></div>'); window.URL.revokeObjectURL(fileList[i]); } $( ".img-div" ).draggable(); $('.img-div').rotatable(); $( ".img-div" ).resizable({aspectRatio:true}); $(".newly-added").on("click", function(e) { $(".newly-added").removeClass("img-selected"); $(this).addClass("img-selected"); e.stopPropagation() }); $(document).on("click", function(e) { if ($(e.target).is(".newly-added") === false) { $(".newly-added").removeClass("img-selected"); } }); } });
.new-multiple{ width:400px !important; height:400px !important; background:white; border:2px solid red; overflow:hidden; } .img-div{ width:200px; height:200px; } .newly-added{ width:100%; height:100%; } .img-selected{ box-shadow: 1px 2px 6px 6px rgb(206, 206, 206); border:2px solid rgb(145, 44, 94); } .ui-resizable-handle.ui-resizable-se.ui-icon.ui-icon-gripsmall-diagonal-se { background-color: white; border: 1px solid tomato; } .ui-rotatable-handle.ui-draggable { background-color: white !important; border: 1px solid tomato; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.min.js"></script> <input name="user_file[]" id="user_file" style="position: relative;overflow: hidden" multiple="" type="file"> <div class="new-multiple"></div>
https://jsfiddle.net/vd11qyzv/21/
So when i am uploading a image i get control handles like this
But i want to place custom control handle like this
How can i achieve this using css and jquery. Please help
When you set the handles
option in resizable, you can then manage them with CSS. Their style and location.
CSS Snippet
.ui-resizable-handle {
border: 0;
border-radius: 50%;
background-color: #00CCff;
width: 14px;
height: 14px;
}
.ui-resizable-nw {
top: -7px;
left: -7px;
}
.ui-resizable-ne {
top: -7px;
right: -7px;
}
.ui-resizable-e {
top: calc(50% - 7px);
right: -7px;
}
.ui-resizable-w {
top: calc(50% - 7px);
left: -7px;
}
.ui-resizable-sw {
bottom: -7px;
left: -7px;
}
.ui-resizable-se {
right: -7px;
bottom: -7px;
}
.ui-resizable-se.ui-icon {
display: none;
}
.ui-rotatable-handle {
background-size: 14px;
background-repeat: no-repeat;
background-position: center;
border: 0;
border-radius: 50%;
background-color: #00CCff;
margin-left: calc(50% - 9px);
bottom: -5px;
width: 18px;
height: 18px;
}
JavaScript
$(function() {
var inputLocalFont = $("#user_file");
inputLocalFont.change(previewImages);
function previewImages() {
var fileList = this.files;
var anyWindow = window.URL || window.webkitURL;
for (var i = 0; i < fileList.length; i++) {
var objectUrl = anyWindow.createObjectURL(fileList[i]);
var $newDiv = $("<div>", {
class: "img-div"
});
var $newImg = $("<img>", {
src: objectUrl,
class: "newly-added"
}).appendTo($newDiv);
$(".new-multiple").append($newDiv);
$newDiv.draggable();
$newDiv.rotatable();
$newDiv.resizable({
aspectRatio: true,
handles: "ne, nw, e, se, sw, w"
});
$newDiv.find(".ui-icon").removeClass("ui-icon ui-icon-gripsmall-diagonal-se");
window.URL.revokeObjectURL(fileList[i]);
}
$(".newly-added").on("click", function(e) {
$(".newly-added").removeClass("img-selected");
$(this).addClass("img-selected");
e.stopPropagation()
});
$(document).on("click", function(e) {
if ($(e.target).is(".newly-added") === false) {
$(".newly-added").removeClass("img-selected");
}
});
}
});
Working Example: https://jsfiddle.net/Twisty/s99kxydw/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.