why would draggable multiply everytime i move it? i took a picture to show you what i mean. this happens every time i move the helmet image resizing is no problem only when i drag the image here is my script only if you need more please feel free to ask thank you.
<script>// External added
jQuery(download).ready(function () {
jQuery(".file-upload-wrapper").hide();
jQuery(".out-put-img1").hide();
jQuery("#imajes45").change(function () {
var selected = jQuery('#imajes45').val();
if (selected == "new-upload") {
jQuery(".file-upload-wrapper").show();
} else {
jQuery(".file-upload-wrapper").hide();
}
});
//File
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
jQuery(".out-put-img1").show();
$('#output1').attr('src', e.target.result);
// / $('.append-img').append('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
jQuery("#upload-img1").change(function () {
readURL(this);
$(".samson").draggable();
$(".out-put-img1").resizable();
});
});
</script>
<script>
// External added
jQuery(download).ready(function () {
jQuery(".file-upload-wrapper1").hide();
jQuery(".out-put-img2").hide();
jQuery("#imajes45").change(function () {
var selected = jQuery('#imajes45').val();
if (selected == "new-upload") {
jQuery(".file-upload-wrapper1").show();
} else {
jQuery(".file-upload-wrapper1").hide();
}
});
//File
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
jQuery(".out-put-img2").show();
$('#output2').attr('src', e.target.result);
// / $('.append-img').append('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
jQuery("#upload-img2").change(function () {
readURL(this);
$(".dragbal1").draggable();
$(".out-put-img2").resizable();
});
});
</script>
<script>
// External added
jQuery(download).ready(function () {
jQuery(".file-upload-wrapper2").hide();
jQuery(".out-put-img4").hide();
jQuery("#imajes45").change(function () {
var selected = jQuery('#imajes45').val();
if (selected == "new-upload") {
jQuery(".file-upload-wrapper2").show();
} else {
jQuery(".file-upload-wrapper2").hide();
}
});
//File
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
jQuery(".out-put-img4").show();
$('#output4').attr('src', e.target.result);
// / $('.append-img').append('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
jQuery("#upload-img4").change(function () {
readURL(this);
$(".chinass2").draggable();
$(".out-put-img4").resizable();
});
});
</script>
Using the following Demo as a sort of Guide, you can make this work better:
http://jqueryui.com/droppable/#photo-manager
With the idea that the user would want to upload an image and then place it on the shirt, I created an upload preview first. This can then be dragged onto the target shirt. It then needs to be appended to #boxes, allowed to be dragged, and resized.
Here is my working example: https://jsfiddle.net/Twisty/4ezggt9h/
HTML
<div class="work-wrapper">
<div id="firstshirt" class="container">
<div id="boxes" class="container">
<img id="img-1" src="https://torcdesign.com/shirts/brown.jpg" />
</div>
</div>
<div class="control-wrapper">
<h3>Controls</h3>
<a id="btn-Preview-Image" class="button">Preview</a>
<a id="download" download="my_image.png" class="button disabled" href="#">Download Image</a>
<select id="imajes45">
<option value="">Choose Source</option>
<option value="new-upload">Upload Images</option>
<option value="select-item">Select Item</option>
</select>
<div class="file-upload-wrapper" id="draggableHelper" style="display: none;">
<input type="file" class="upload-img" name="file1" id="upload-img-1" />
<div id="upload-preview" class="small upPreview">
<span>0/3</span>
<ul id="preview-gallery" class="gallery ui-helper-reset ui-helper-clearfix">
</ul>
</div>
</div>
<select name="subselector" class="file-select" style="display: none;">
<option value="">Choose Gallery</option>
<option value="bulldog">Bulldogs</option>
</select>
<div id="bulldog-gallery" class="upPreview hidden">
<ul class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-all"><img src="https://torcdesign.com/clipart/pT78gE6pc.gif" class="icon" /></li>
<li class="ui-widget-content ui-corner-all"><img src="https://torcdesign.com/clipart/LiKkRqkeT.gif" class="icon" /></li>
</ul>
</div>
</div>
</div>
<h3>Result:</h3>
<div>
<div id="previewImage"></div>
</div>
CSS
.work-wrapper {
display: block;
width: 100%;
position: relative;
}
.work-wrapper:after {
content: "";
clear: both;
display: table;
}
.container {
background-color: transparent;
display: inline-block;
width: 300px;
height: 300px;
border: 2px solid;
position: relative;
overflow: hidden;
/* Will stretch to specified width/height */
background-size: 490px 500px;
background-repeat: no-repeat;
}
.control-wrapper {
position: absolute;
top: 0;
left: 310px;
width: 310px;
}
.control-wrapper h3 {
padding: 0.2em .4em;
margin: 0;
}
.button {
background: #f0f0f0;
border: 2px groove #e3e3e3;
border-radius: 4px;
color: #000000;
display: block;
font-family: Arial;
font-size: 13px;
line-height: 17px;
text-decoration: none;
text-align: center;
padding: 0.2em 0.4em;
margin: 3px 5px;
}
.upPreview {
border: 2px groove #e0e0e0;
border-radius: 6px;
font-family: Arial;
font-size: 13px;
text-align: center;
width: 100%;
height: 142px;
margin: 5px;
}
.upPreview span {
display: block;
width: 100%;
border-bottom: 2px groove #e0e0e0;
background: #e0e0e0;
}
.upPreview ul {
width: 100%;
background: #FFF;
}
.upPreview ul li {
float: left;
width: 90px;
height: 110px;
margin: 0.4em;
text-align: center;
}
.upPreview ul li a {
float: right;
}
.upPreview .icon {
width: 80px;
height: 80px;
margin: 5px;
}
.hidden {
display: none;
}
.button:hover {
background: #f0f0ff;
}
.disabled {
border: #606060;
color: #606060;
}
JavaScript
function readURL(input) {
if (input.files && input.files[0]) {
console.log("Reading File.");
var reader = new FileReader();
reader.addEventListener("load", function(e) {
if (jQuery("#preview-gallery li").length == 3) {
input.value = "";
return false;
}
var $imgP = jQuery("<img>", {
class: "uploaded-image icon",
src: reader.result
});
var $item = jQuery("<li>", {
class: "ui-widget-content ui-corner-all hidden"
});
$item.append($imgP).append("<a href='#' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>");
$item.appendTo(jQuery("#preview-gallery")).show("slow");
makeDrag($item);
updatePreviewCount();
});
if (input.files[0]) {
reader.readAsDataURL(input.files[0]);
} else {
console.log(" Reader: File Not found.");
}
input.value = "";
}
}
function renderContent() {
html2canvas(jQuery("#firstshirt"), {
allowTaint: true,
logging: true
}).then(function(canvas) {
jQuery("#previewImage").append(canvas);
jQuery("#download").css("display", "inline");
jQuery("#download").attr("href", jQuery("#previewImage")[0].children[0].toDataURL());
});
}
function makeDrag(o) {
o.draggable({
helper: "original",
revert: "invalid",
zIndex: 999
});
}
function makeResize(o) {
o.resizable();
}
function addImage($item, $pos) {
$item.fadeOut();
var $img = $item.find("img");
$img.css("width", "80px").css("height", "80px");
$item.remove();
updatePreviewCount();
var $drop = jQuery("<div>", {
class: "dragbal",
style: "position: absolute; top: 100px; left: 100px;"
});
$drop.append($img);
$drop.appendTo(jQuery("#boxes")).fadeIn();
$drop.draggable({
containment: "#boxes"
});
makeResize($drop.find("img"));
}
function updatePreviewCount() {
var cnt = jQuery("#preview-gallery li").length;
jQuery(".upPreview span").html(cnt + "/3");
}
jQuery(download).ready(function() {
// Setup
jQuery(".file-upload-wrapper").hide();
jQuery(".out-put-img").hide();
jQuery('.smallimages').hide();
makeDrag(jQuery("[id$='-gallery'] ul li"));
jQuery("#boxes").droppable({
accept: ".gallery > li",
drop: function(e, ui) {
console.log("Drop Pos:", ui.offset);
addImage(ui.helper, ui.position);
}
});
// Events
jQuery("#btn-Preview-Image").click(function(e) {
e.preventDefault();
renderContent();
jQuery("#download").removeClass("disabled");
});
jQuery("#download").click(function(e) {
e.preventDefault();
return jQuery(this).hasClass("disabled");
});
jQuery("#imajes45").change(function() {
if (jQuery('#imajes45').val() == "new-upload") {
jQuery(".file-upload-wrapper").show();
jQuery(".file-select").hide();
} else {
jQuery(".file-upload-wrapper").hide();
jQuery(".file-select").show();
}
});
jQuery(".file-select").change(function() {
jQuery(".upPreview").hide();
jQuery("#" + jQuery(this).val() + "-gallery").show();
})
jQuery(".upload-img").change(function() {
readURL(this);
});
jQuery('img').on('click', function() {
var $img = jQuery("<img>", {
class: "modal-content",
src: jQuery(this).attr("src")
});
var $drag = jQuery("<div>", {
class: "imgdrag"
});
$drag.append($img);
/*
$('#fotos').append('<div class="imgdrag"><img class="modal-content" src="' + $(this).attr('src') + '"/></div>');
$('.imgdrag').draggable();
$('#fotos').droppable();
$('.modal-content').resizable();
*/
jQuery("#fotos").append($drag);
$drag.draggable();
});
});
This may generate more questions than answers. Hope it helps.
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://i.stack.imgur.com/j4vJj.jpg', '推荐 我命由我不由天 的文章《draggable multiplies every time i move it》','https://www.manongdao.com/article-277685.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}