Question

我想上传的图片可以拖动，有人可以帮我吗？

项目1和项目2可以很好地拖动，但是图像就像一个用于拖动的项目，所以我可以拖动例如3个图像，但不能单独拖动..

有javascript代码

    window.onload = function(){

    //Check File API support
    if(window.File && window.FileList && window.FileReader){
        var filesInput = document.getElementById("files"); 
        filesInput.addEventListener("change", function(event){

            var files = event.target.files; //FileList object
            var output = document.getElementById("result");

            for(var i = 0; i< files.length; i++){
                var file = files[i]; 
                //Only pics
                if(!file.type.match('image'))
                  continue;                
                var picReader = new FileReader();                
                picReader.addEventListener("load",function(event){                    
                    var picFile = event.target;                    
                    var div = document.createElement("div");                    
                    div.innerHTML = "<li class='ui-state-default'><img class='thumbnail' src='" + picFile.result + "'" +"title='" + picFile.name + "'/></li>";                    
                    output.insertBefore(div,null);                            
                });              
                 //Read the image
                picReader.readAsDataURL(file);
            }                                        
        });
    }
    else{
        console.log("Your browser does not support File API");
    }
}

Html看起来像：

<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
<output id="result" />
</ul>

Answer 1

有一种方法可以使您的元素可拖动，可排序等等。你可以使用jquery-ui。它非常聪明的jquery插件。

我希望它会对你有所帮助。

https://jqueryui.com/draggable/

使用Javascript使上载的图像可拖动

1 个答案: