2014-09-10 171 views
-1

目前我正在處理html5拖放應用程序,但是我在jsfidle網站上發現了此代碼。它工作正常,但是當我在本地系統的webstroms編輯器中使用時,它不起作用。所以請告訴我我該怎麼做,我該如何解決這個問題。HTML5拖放不起作用

<!DOCTYPE html> 
    <html> 
    <head lang="en"> 
     <meta charset="UTF-8"> 
     <title></title> 
     <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> 
     <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     // get reference to the canvas and its context 
     var canvas = document.getElementById("canvas"); 
     var ctx = canvas.getContext("2d"); 
     ctx.font = "16px helvetica"; 

     // variables 

     // some text objects defining text on the canvas 
     var texts = []; 

     // variables used to get mouse position on the canvas 
     var $canvas = $("#canvas"); 
     var canvasOffset = $canvas.offset(); 
     var offsetX = canvasOffset.left; 
     var offsetY = canvasOffset.top; 
     var scrollX = $canvas.scrollLeft(); 
     var scrollY = $canvas.scrollTop(); 

     // variables to save last mouse position 
     // used to see how far the user dragged the mouse 
     // and then move the text by that distance 
     var startX; 
     var startY; 

     // this var will hold the index of the selected text 
     var selectedText = -1; 


     // make the <li> draggable 
     $("ul li").draggable({ 
      helper: 'clone' 
     }); 

     // drop on canvas 
     $("#canvas").droppable({ 
      accept: "ul li", 
      drop: function (event, ui) { 
       ctx.fillText($(ui.draggable).clone().text(), ui.position.left - event.target.offsetLeft, ui.position.top - event.target.offsetTop); 

       var text = $(ui.draggable).clone().text(); 
       var x = ui.position.left - event.target.offsetLeft; 
       var y = ui.position.top - event.target.offsetTop; 
       var width = ctx.measureText(text).width; 
       var height = 16; 

       // save this text info in an object in texts[] 
       texts.push({ 
        text: text, 
        x: x, 
        y: y, 
        width: width, 
        height: height 
       }); 

       // draw all texts to the canvas 
       draw(); 

      } 
     }); 

     // clear the canvas draw all texts 
     function draw() { 
      ctx.clearRect(0, 0, canvas.width, canvas.height); 
      for (var i = 0; i < texts.length; i++) { 
       var text = texts[i]; 
       ctx.fillText(text.text, text.x, text.y); 
      } 
     } 

     // test if x,y is inside the bounding box of texts[textIndex] 
     function textHittest(x, y, textIndex) { 
      var text = texts[textIndex]; 
      return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y); 
     } 

     // handle mousedown events 
     // iterate through texts[] and see if the user 
     // mousedown'ed on one of them 
     // If yes, set the selectedText to the index of that text 
     function handleMouseDown(e) { 
      e.preventDefault(); 
      startX = parseInt(e.clientX - offsetX); 
      startY = parseInt(e.clientY - offsetY); 
      // Put your mousedown stuff here 
      for (var i = 0; i < texts.length; i++) { 
       if (textHittest(startX, startY, i)) { 
        selectedText = i; 
       } 
      } 
     } 

     // done dragging 
     function handleMouseUp(e) { 
      e.preventDefault(); 
      selectedText = -1; 
     } 

     // also done dragging 
     function handleMouseOut(e) { 
      e.preventDefault(); 
      selectedText = -1; 
     } 

     // handle mousemove events 
     // calc how far the mouse has been dragged since 
     // the last mousemove event and move the selected text 
     // by that distance 
     function handleMouseMove(e) { 
      if (selectedText < 0) { 
       return; 
      } 
      e.preventDefault(); 
      mouseX = parseInt(e.clientX - offsetX); 
      mouseY = parseInt(e.clientY - offsetY); 

      // Put your mousemove stuff here 
      var dx = mouseX - startX; 
      var dy = mouseY - startY; 
      startX = mouseX; 
      startY = mouseY; 

      var text = texts[selectedText]; 
      text.x += dx; 
      text.y += dy; 
      draw(); 
     } 

     // listen for mouse events 
     $("#canvas").mousedown(function (e) { 
      handleMouseDown(e); 
     }); 
     $("#canvas").mousemove(function (e) { 
      handleMouseMove(e); 
     }); 
     $("#canvas").mouseup(function (e) { 
      handleMouseUp(e); 
     }); 
     $("#canvas").mouseout(function (e) { 
      handleMouseOut(e); 
     }); 
    </script> 
     <style type="text/css"> 
      body { 
       background-color: ivory; 
      } 
      #canvas { 
       border:1px solid red; 
      } 
     </style> 
    </head> 
    <body> 
    <ul id="drag"> 
     <li class="new-item">Drag me down1</li> 
     <li class="new-item">Drag me down2</li> 
     <li class="new-item">Drag me down3</li> 
    </ul> 
    <canvas id="canvas" width=300 height=300></canvas> 
    </body> 
    </html> 
+1

它是如何工作的?控制檯上是否有錯誤? – 2014-09-10 11:10:20

+0

沒有錯誤發生,拖放不起作用。 – Kishan 2014-09-10 11:12:47

+0

因此,它適用於jsfiddle而不是本地? – 2014-09-10 11:48:29

回答

1

腳本在頁面上的元素被創建之前運行 - 您應該在加載時運行它。

你有jQuery,所以你可以用它來做到這一點。只需更改代碼,如下所示:

$(function() { 
     // the javascript 
} 
1

您可以在body中應用script。您可以使用此代碼。

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> 
    <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script> 

    <style type="text/css"> 
     body { 
      background-color: ivory; 
     } 
     #canvas { 
      border:1px solid red; 
     } 
    </style> 
</head> 
<body> 
<ul id="drag"> 
    <li class="new-item">Drag me down1</li> 
    <li class="new-item">Drag me down2</li> 
    <li class="new-item">Drag me down3</li> 
</ul> 
<canvas id="canvas" width=300 height=300></canvas> 
<script type="text/javascript"> 
    // get reference to the canvas and its context 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    ctx.font = "16px helvetica"; 

    // variables 

    // some text objects defining text on the canvas 
    var texts = []; 

    // variables used to get mouse position on the canvas 
    var $canvas = $("#canvas"); 
    var canvasOffset = $canvas.offset(); 
    var offsetX = canvasOffset.left; 
    var offsetY = canvasOffset.top; 
    var scrollX = $canvas.scrollLeft(); 
    var scrollY = $canvas.scrollTop(); 

    // variables to save last mouse position 
    // used to see how far the user dragged the mouse 
    // and then move the text by that distance 
    var startX; 
    var startY; 

    // this var will hold the index of the selected text 
    var selectedText = -1; 


    // make the <li> draggable 
    $("ul li").draggable({ 
     helper: 'clone' 
    }); 

    // drop on canvas 
    $("#canvas").droppable({ 
     accept: "ul li", 
     drop: function (event, ui) { 
      ctx.fillText($(ui.draggable).clone().text(), ui.position.left - event.target.offsetLeft, ui.position.top - event.target.offsetTop); 

      var text = $(ui.draggable).clone().text(); 
      var x = ui.position.left - event.target.offsetLeft; 
      var y = ui.position.top - event.target.offsetTop; 
      var width = ctx.measureText(text).width; 
      var height = 16; 

      // save this text info in an object in texts[] 
      texts.push({ 
       text: text, 
       x: x, 
       y: y, 
       width: width, 
       height: height 
      }); 

      // draw all texts to the canvas 
      draw(); 

     } 
    }); 

    // clear the canvas draw all texts 
    function draw() { 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     for (var i = 0; i < texts.length; i++) { 
      var text = texts[i]; 
      ctx.fillText(text.text, text.x, text.y); 
     } 
    } 

    // test if x,y is inside the bounding box of texts[textIndex] 
    function textHittest(x, y, textIndex) { 
     var text = texts[textIndex]; 
     return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y); 
    } 

    // handle mousedown events 
    // iterate through texts[] and see if the user 
    // mousedown'ed on one of them 
    // If yes, set the selectedText to the index of that text 
    function handleMouseDown(e) { 
     e.preventDefault(); 
     startX = parseInt(e.clientX - offsetX); 
     startY = parseInt(e.clientY - offsetY); 
     // Put your mousedown stuff here 
     for (var i = 0; i < texts.length; i++) { 
      if (textHittest(startX, startY, i)) { 
       selectedText = i; 
      } 
     } 
    } 

    // done dragging 
    function handleMouseUp(e) { 
     e.preventDefault(); 
     selectedText = -1; 
    } 

    // also done dragging 
    function handleMouseOut(e) { 
     e.preventDefault(); 
     selectedText = -1; 
    } 

    // handle mousemove events 
    // calc how far the mouse has been dragged since 
    // the last mousemove event and move the selected text 
    // by that distance 
    function handleMouseMove(e) { 
     if (selectedText < 0) { 
      return; 
     } 
     e.preventDefault(); 
     mouseX = parseInt(e.clientX - offsetX); 
     mouseY = parseInt(e.clientY - offsetY); 

     // Put your mousemove stuff here 
     var dx = mouseX - startX; 
     var dy = mouseY - startY; 
     startX = mouseX; 
     startY = mouseY; 

     var text = texts[selectedText]; 
     text.x += dx; 
     text.y += dy; 
     draw(); 
    } 

    // listen for mouse events 
    $("#canvas").mousedown(function (e) { 
     handleMouseDown(e); 
    }); 
    $("#canvas").mousemove(function (e) { 
     handleMouseMove(e); 
    }); 
    $("#canvas").mouseup(function (e) { 
     handleMouseUp(e); 
    }); 
    $("#canvas").mouseout(function (e) { 
     handleMouseOut(e); 
    }); 
</script> 
</body> 
</html> 
+0

感謝您的回答,singh – Kishan 2014-09-10 12:38:53