Question

Hello堆栈溢出社区！

我正在编写一个脚本来制作简单的拖放文档制作者。我自己编写了所有当前代码，但我不知道如何启用将桌面文件拖到文档中。这是我到目前为止编写的代码（对于messedup缩进很抱歉，代码块功能搞砸了）：

<html>
   <head>
      <style>
     #main { position:absolute; top:10px; left:50%; margin-left:-450px; width:900px; height:900px; border:dashed 1px lightgrey; }
     #trash { margin-top:10px; width:200px; height:200px; border:dotted 4px black; position:absolute; top:0px; left:5px; }
     #new { width:200px; height:200px; border:dotted 5px black; }
     .new { float:right; }
     .drag { float:left; resize:both; overflow:hidden; height:110px; width:110px; }
     .square { background-color:none; width:10px; height:10px; float:left; }
     .drag * { resize:none; width:100px; height:100px }
     .block { background-color:red; }
      </style>

      <script src="jq/jquery-1.9.1.js"></script>
      <script src="jq/jquery-ui.js"></script>

      <script>
     var blockcolors = ["red","blue","green","yellow","white","black","lightgrey","lightblue"];
     var color = 1;
     var id = 2;
     function drag(ev)
     {
        ev.dataTransfer.setData("Text",ev.target.id);
     }

     function drop(ev)
     {
        ev.preventDefault();
        ev.target.appendChild(document.getElementById(ev.dataTransfer.getData("Text")));
     }
     function droptrash(ev)
     {
        ev.preventDefault();
        $("#"+ev.dataTransfer.getData("Text")).remove();
     }
     function change(div)
     {
        var divw=parseInt(div.style.width);
        var divh=parseInt(div.style.height);
        var imgw=divw-10;
        var imgh=divh-10;
        div.children[0].style.width=imgw;
        div.children[0].style.height=imgh;
        div.style.border="dotted 3px grey";
     }
     function makeGrid()
     {
        var main = $("#main");
        for (var i = 0; i < 8100; i++)
        {
           var square = document.createElement('div');
           square.setAttribute('class', 'square');
           square.ondragover = function(event) { event.preventDefault(); };
           square.ondrop = function(event) { drop(event); };
           main.prepend(square);
        }
     }
     function additem() {
       var newbox = document.getElementById("new");
       newbox.innerHTML = '<div id="div'+id+'" class="drag" onmouseout="this.style.border=0" draggable="true" ' +
                 'ondragstart="drag(event)" onmousemove="change(this)"></div>';
       div = document.getElementById("div"+id);
       div.innerHTML = $("#newtype").val();
       id+=1;
     }
     function blockcolor(block) {
        block.style.backgroundColor = blockcolors[color];
        if (color == blockcolors.length-1)
           color = 0;
        color++;
     }
      </script>
   </head>   
   <body onload="makeGrid()" class="new">
      <div id="new" class="new"></div>
      <div style="clear:both"></div>
      <select id="newtype" class="new">
     <option value="<img draggable='false' src='glider.jpg'/>">Image</option>
     <option value="<textarea></textarea>">Text box</option>
     <option value="<div onclick='blockcolor(this)' class='block'></div>">Block</option>
      </select>
      <button onclick="additem()" class="new">add an item</button>
      <div style="clear:both"></div>
      <center>
     <div style="clear:both"></div>
     <div ID="main" overflow="auto">
     </div>
      </center>
      <div style="clear:both"></div>
      <div id="trash" ondragover="event.preventDefault()" ondrop="droptrash(event)" overflow="auto"><big>Trash</big></div>
   </body>
</html>

这样可行，但它没有拖动文件的功能。我想添加我在网上找到的这个代码本身的代码：

<html>
<head>
<style>
#drop { min-height: 150px; width: 250px; border: 1px solid blue; margin: 10px; padding: 10px; }
</style>
<script>
if(window.FileReader) { 
 var drop; 
 addEventHandler(window, 'load', function() {
    drop   = document.getElementById('drop');
    var list   = document.getElementById('list');

    function cancel(e) {
      if (e.preventDefault) { e.preventDefault(); }
      return false;
    }

    // Tells the browser that we *can* drop on this target
    addEventHandler(drop, 'dragover', cancel);
    addEventHandler(drop, 'dragenter', cancel);

addEventHandler(drop, 'drop', function (e) {
  e = e || window.event; // get window.event if e argument missing (in IE)   
  if (e.preventDefault) { e.preventDefault(); } // stops the browser from redirecting off to the image.

  var dt    = e.dataTransfer;
  var files = dt.files;
  for (var i=0; i<files.length; i++) {
    var file = files[i];
    var reader = new FileReader();

    //attach event handlers here...

    reader.readAsDataURL(file);
addEventHandler(reader, 'loadend', function(e, file) {
    var bin           = this.result; 
    var img = document.createElement("img"); 
    img.file = file;   
    img.src = bin;
    drop.innerHTML = "";
    drop.appendChild(img);
}.bindToEventHandler(file));
  }
  return false;
});
Function.prototype.bindToEventHandler = function bindToEventHandler() {
  var handler = this;
  var boundParameters = Array.prototype.slice.call(arguments);
  //create closure
  return function(e) {
      e = e || window.event; // get window.event if e argument missing (in IE)   
      boundParameters.unshift(e);
      handler.apply(this, boundParameters);
  }
};
  });
} else { 
  document.getElementById('status').innerHTML = 'Your browser does not support the HTML5 FileReader.';
}
function addEventHandler(obj, evt, handler) {
    if(obj.addEventListener) {
        // W3C method
        obj.addEventListener(evt, handler, false);
    } else if(obj.attachEvent) {
        // IE method.
        obj.attachEvent('on'+evt, handler);
    } else {
        // Old school method.
        obj['on'+evt] = handler;
    }
}
</script>
</head>
<body>
  <DIV id="drop"></DIV>
  <DIV id="list"></DIV>
</body>
</html>

我的问题是将它们结合起来。第二个脚本弄乱了整个事物的所有拖放功能。我非常感谢任何帮助。

Answer 1

文件删除脚本有一些细微的变化。只需将变量“drop”重命名为“dropElement”（或任何其他名称，然后“drop”），因为它与第一个脚本中的函数名称“drop”冲突。所以这是你的第二个脚本。

<script>
if(window.FileReader) { 
 var dropElement; 
 addEventHandler(window, 'load', function() {
    dropElement   = document.getElementById('drop');
    var list   = document.getElementById('list');

    function cancel(e) {
      if (e.preventDefault) { e.preventDefault(); }
      return false;
    }

    // Tells the browser that we *can* drop on this target
    addEventHandler(dropElement, 'dragover', cancel);
    addEventHandler(dropElement, 'dragenter', cancel);

addEventHandler(dropElement, 'drop', function (e) {
  e = e || window.event; // get window.event if e argument missing (in IE)   
  if (e.preventDefault) { e.preventDefault(); } // stops the browser from redirecting off to the image.

  var dt    = e.dataTransfer;
  var files = dt.files;
  for (var i=0; i<files.length; i++) {
    var file = files[i];
    var reader = new FileReader();

    //attach event handlers here...

    reader.readAsDataURL(file);
addEventHandler(reader, 'loadend', function(e, file) {
    var bin           = this.result; 
    var img = document.createElement("img"); 
    img.file = file;   
    img.src = bin;
    dropElement.innerHTML = "";
    dropElement.appendChild(img);
}.bindToEventHandler(file));
  }
  return false;
});
Function.prototype.bindToEventHandler = function bindToEventHandler() {
  var handler = this;
  var boundParameters = Array.prototype.slice.call(arguments);
  //create closure
  return function(e) {
      e = e || window.event; // get window.event if e argument missing (in IE)   
      boundParameters.unshift(e);
      handler.apply(this, boundParameters);
  }
};
  });
} else { 
  document.getElementById('status').innerHTML = 'Your browser does not support the HTML5 FileReader.';
}
function addEventHandler(obj, evt, handler) {
    if(obj.addEventListener) {
        // W3C method
        obj.addEventListener(evt, handler, false);
    } else if(obj.attachEvent) {
        // IE method.
        obj.attachEvent('on'+evt, handler);
    } else {
        // Old school method.
        obj['on'+evt] = handler;
    }
}
</script>

为什么文件拖放禁用可拖动元素？

1 个答案: