2017-01-09 11 views
0

Почему бы перетаскивать каждый раз каждый раз, когда я его перемещаю? я сделал снимок, чтобы показать вам, что я имею в виду. это происходит каждый раз, когда я перемещаю размер изображения на шлеме, это не проблема, только когда я перетаскиваю изображение здесь, это мой скрипт, только если вам нужно больше, пожалуйста, не стесняйтесь спрашивать спасибо.draggable умножает каждый раз, когда я его перемещаю

<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); 
 
\t \t \t 
 
\t $(".samson").draggable(); 
 
$(".out-put-img1").resizable(); 
 
\t 
 

 
     }); 
 
    }); 
 
</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); 
 
\t \t \t 
 
\t \t $(".dragbal1").draggable(); 
 
$(".out-put-img2").resizable(); 
 
\t \t 
 
\t \t 
 
     }); 
 
    }); 
 
</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); 
 
\t \t \t 
 
\t $(".chinass2").draggable(); 
 
$(".out-put-img4").resizable(); 
 
\t \t 
 

 
     }); 
 
    }); 
 
</script>

enter image description here

+0

Вы можете добавить рабочий jsfiddle или фрагмент? –

+0

Вот моя скрипка, но она не работает должным образом. https://jsfiddle.net/2taya76y/2/ – xcalliber

+0

Какой элемент перетаскивается в скрипке? картинка не кажется перетаскиваемой. –

ответ

1

Используя следующую демонстрацию своего рода Guide, вы можете сделать эту работу лучше:

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

Это может вызвать больше вопросов, чем ответов. Надеюсь, поможет.

+0

Я ценю всю вашу помощь. Я посмотрю, работает ли она с остальной частью моего кода. – xcalliber

+0

Последний вопрос: как я могу сохранить имя файла? причина в том, что я хочу сохранить его, чтобы я мог загрузить изображение – xcalliber

+1

@xcalliber, если у читателя есть его, его можно будет собрать оттуда. В противном случае это будет кроличья дыра коллекции из значения поля ввода. Вот ручка, каждый браузер обрабатывает имя файла по-разному. – Twisty

 Смежные вопросы

  • Нет связанных вопросов^_^