Question

属性draggable在我的代码中运行正常，但我真正想要的是克隆移动而不是原始图像和每当我添加帮助器时：＆＃34; clone＆＃34;属性图像不会去新的位置，我不明白为什么，我正在尝试实施贴纸库，我想将这些贴纸（图像列表）拖到另一张上传的照片上

HTML：重来上传图片

         <div class="col-md-3">
          <button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">Upload Sticker</button>
              <div id="cont">
                <ul id="list"></ul>
              </div>
              <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" id="myModalLabel">Upload Sticker</h4>

贴纸标题文件输入关

的javascript：

 $("#start-over").hide();
 function readURLL(input) {
            if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $(".maino").attr('src', e.target.result);
                $(".maino").droppable({
                   activeClass: "ui-state-default",
                   hoverClass: "ui-state-hover",
                   drop: function(event, ui) {
                       var newClone = $(ui.helper).clone();
                       $(this).append(newClone);
                   }
               });
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#imageLoader").change(function(){
        var div = document.createElement('div');
        div.innerHTML = ['<img  class="maino" src="" />'].join('');
        document.getElementById('imageCanvas').insertBefore(div, null);
        readURLL(this);
    });

/*---------------------------------------------------------------------------------*/
var counter=0;
function readURL(input) {
            if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $("#card"+(++counter)).attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#files").change(function(){
        var li = document.createElement('li');
        li.className="draggp";
        li.innerHTML = ['<img  class="thumb" src="" />'].join('');
        document.getElementById('list').insertBefore(li, null);
        $(".draggp").draggable({helper:"clone"});
        $(".thumb").resizable();
        $('#list li img').each(function(i,el){
            el.id ='card'+ (i+1);
        });
        readURL(this);
    });
    $("#imageLoader").click(function(){
        $(".up-img").hide();
        $("#start-over").show();
    });

    $("#start-over").click(function(){
        $("#imageCanvas").empty();
        $("#list").empty();
        counter=0;
        $("#start-over").hide();
        $(".up-img").show();
    });
    window.onload = function() {
    document.getElementById('sub').onclick = function() {
        document.getElementById('myform').submit();
        return false;
    };
};

似乎无法使jquery可以放置和拖动以正常工作

0 个答案: