如何拖动该分区中的图片？

Question

我有这个样本：

link

代码HTML：

<div class="border">
    <div id="i-choose">
            <input type="file" name="file" id="file" class="inputfile">
            <label for="file">Browse</label>                    
     </div>
</div>

CODE CSS：

#i-choose {
    float: left;
    font-size: 17pt;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;}

#i-choose label {
    line-height: 0px;
    font-size: 17pt;
    margin-top: 12px;
    height: auto;
    color: #0096BD;
    margin-left: 5px;
    cursor: pointer;}

.border{
  border:1px dashed grey;
    overflow:hidden;
}

基本上我想要做的就是在div中拍摄一张图像并放弃。

我把图片更清楚地理解了。

我该如何解决这个问题？有没有人有任何想法？

提前致谢！

Answer 1

请查看以下示例JS代码：

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

$("#file").change(function () {
    readURL(this);
});

CSS：

#div1 {
    border: 1px solid #aaaaaa;
    padding: 10px;
    min-height:70px;
    width: 350px;
}
#i-choose {
    float: left;
    font-size: 17pt;
}
.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

#i-choose label {
    line-height: 0px;
    font-size: 17pt;
    margin-top: 12px;
    height: auto;
    color: #0096BD;
    margin-left: 5px;
    cursor: pointer;
}

.border {
    border:1px dashed grey;
    overflow:hidden;
}

以及相关的HTML：

<form id="form1" runat="server">
<div class="border">
    <div id="i-choose">
        <input type='file' id="file" name="file" class="inputfile" />
        <label for="file">Browse</label>
        <img id="blah" src="#" alt="" draggable="true" ondragstart="drag(event)" />
    </div>
</div>

JsFiddle