javascript - 每次我移动它时，可拖动都会成倍增加

Question

为什么每次我移动它时，draggable 都会增加？我拍了一张照片来告诉你我的意思。每次我移动 Helm 时都会发生这种情况，只有当我拖动图像时，图像大小调整才没有问题，这里是我的脚本，仅当您需要更多时，请随时询问，谢谢。

 <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

使用以下演示作为一种指南，您可以使这项工作更好:

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();
  });
});

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