title: HTML5 Drag and Drop is not working
body: <p>Currently i am working on html5 drag and drop applications but i found this code on jsfidle site. It is working fine but when i used in webstroms editor at my local system then it is not working. So please tell me what can i do and how can i resolved this problems.</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head lang="en"&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          // 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 &lt;li&gt; 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 &lt; 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 &gt;= text.x &amp;&amp; x &lt;= text.x + text.width &amp;&amp; y &gt;= text.y - text.height &amp;&amp; y &lt;= 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 &lt; 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 &lt; 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);
          });
      &lt;/script&gt;
          &lt;style type="text/css"&gt;
              body {
                  background-color: ivory;
              }
              #canvas {
                  border:1px solid red;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;ul id="drag"&gt;
          &lt;li class="new-item"&gt;Drag me down1&lt;/li&gt;
          &lt;li class="new-item"&gt;Drag me down2&lt;/li&gt;
          &lt;li class="new-item"&gt;Drag me down3&lt;/li&gt;
      &lt;/ul&gt;
      &lt;canvas id="canvas" width=300 height=300&gt;&lt;/canvas&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>