本文介绍了每次我移动它时，可拖动倍增的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
为什么每次移动它都会拖延多次？我拍了一张照片，告诉你我的意思。这种情况每次我移动头盔图像调整大小是没有问题只有当我拖动图像这里是我的脚本只有你需要更多请随时问问谢谢。
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>推荐答案
使用以下Demo作为一种指南，您可以使这项工作更好：
Using the following Demo as a sort of Guide, you can make this work better:
由于用户想要上传图片然后将其放在衬衫上，我首先创建了一个上传预览。然后可以将其拖到目标衬衫上。然后需要将其附加到 #boxes ，允许拖动和调整大小。
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.
这是我的工作示例：
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.
这篇关于每次我移动它时，可拖动倍增的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！