Question

为什么每次移动它都会拖延多次？我拍了一张照片，告诉你我的意思。这种情况每次我移动头盔图像调整大小是没有问题只有当我拖动图像这里是我的脚本只有你需要更多请随时问问谢谢。

 <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>

Answer 1

使用以下Demo作为一种指南，您可以更好地完成这项工作：

http://jqueryui.com/droppable/#photo-manager

考虑到用户想要上传图像然后将其放在衬衫上，我首先创建了一个上传预览。然后可以将其拖到目标衬衫上。然后需要将其附加到#boxes，允许拖动和调整大小。

以下是我的工作示例：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();
  });
});

这可能会产生比答案更多的问题。希望它有所帮助。

每次我移动它时，可拖动倍增

1 个答案: