HTML5/Javascript - Идеальный пример перетаскивания между несколькими полотнами не работает

У меня есть проблема, я надеюсь, кто-то сможет помочь ...HTML5/Javascript - Идеальный пример перетаскивания между несколькими полотнами не работает

На моем заявлении я требую средства, чтобы быть в состоянии до перетаскивание изображений между несколькими холстами.

Есть несколько предварительно сделанные примеров перетаскивания между несколькими полотнами имеющимся в Интернете, и я нашел идеальный пример для моих потребностей любезны «Ричард Heyes» из RGraph которого вы можете увидеть here (ПРИМЕЧАНИЕ : вы должны щелкнуть изображение, прежде чем вы сможете его перетащить).

Как вы можете видеть, на его веб-сайте эта функция перетаскивания отлично работает, однако, когда я переношу javascript, html и css в мое приложение , способность перетаскивать изображение не работает.

Что я делаю:

<!DOCTYPE html> 
<html> 
<body> 

<h1>My First Heading</h1> 

<p>My first paragraph.</p> 

<style type="text/css"> 

canvas { 
    border: 1px solid #808080; 
} 

</style> 

<canvas style="float: left" height="125" width="400" id="cvs1">[No canvas support]</canvas> 
<canvas style="float: left; margin-left: 100px" height="125" width="400" id="cvs2">[No canvas support]</canvas> 

<script> 
    window.onload = function() 
    { 
     var canvas1 = document.getElementById("cvs1"); 
     var canvas2 = document.getElementById("cvs2"); 
     var context1 = canvas1.getContext('2d'); 
     var context2 = canvas2.getContext('2d'); 
     var imageXY = {x: 5, y: 5}; 




     /** 
     * This draws the image to the canvas 
     */ 
     function Draw() 
     { 
      //Clear both canvas first 
      canvas1.width = canvas1.width 
      canvas2.width = canvas2.width 

      //Draw a red rectangle around the image 
      if (state && state.dragging) { 
       state.canvas.getContext('2d').strokeStyle = 'red'; 
       state.canvas.getContext('2d').strokeRect(imageXY.x - 2.5, 
                 imageXY.y - 2.5, 
                 state.image.width + 5, 
                 state.image.height + 5); 
      } 

      // Now draw the image 
      state.canvas.getContext('2d').drawImage(state.image, imageXY.x, imageXY.y); 
     } 




     canvas2.onclick = 
     canvas1.onclick = function (e) 
     { 

      if (state && state.dragging) { 
       state.dragging = false; 
       Draw(); 
       return; 
      } 





      var mouseXY = RGraph.getMouseXY(e); 

      state.canvas = e.target; 

      if ( mouseXY[0] > imageXY.x 
       && mouseXY[0] < (imageXY.x + state.image.width) 
       && mouseXY[1] > imageXY.y 
       && mouseXY[1] < (imageXY.y + state.image.height)) { 

       state.dragging  = true; 
       state.originalMouseX = mouseXY[0]; 
       state.originalMouseY = mouseXY[1]; 
       state.offsetX   = mouseXY[0] - imageXY.x; 
       state.offsetY   = mouseXY[1] - imageXY.y; 

      } 
     } 

     canvas1.onmousemove = 
     canvas2.onmousemove = function (e) 
     { 

      if (state.dragging) { 

       state.canvas = e.target; 

       var mouseXY = RGraph.getMouseXY(e); 

       // Work how far the mouse has moved since the mousedon event was triggered 
       var diffX = mouseXY[0] - state.originalMouseX; 
       var diffY = mouseXY[1] - state.originalMouseY; 

       imageXY.x = state.originalMouseX + diffX - state.offsetX; 
       imageXY.y = state.originalMouseY + diffY - state.offsetY; 

       Draw(); 

       e.stopPropagation(); 
      } 
     } 

     /** 
     * Load the image on canvas1 initially and set the state up with some defaults 
     */ 
     state = {} 
     state.dragging  = false; 
     state.canvas  = document.getElementById("cvs1"); 
     state.image  = new Image(); 
     state.image.src = 'http://www.rgraph.net/images/logo.png'; 
    state.offsetX  = 0; 
     state.offsetY  = 0; 

     state.image.onload = function() 
     { 
      Draw(); 
     } 
    } 

</script> 
</body> 
</html> 

<!-- CODE COURTESY OF RICHARD HEYES OF RGRAPH 
    http://www.rgraph.net/blog/2013/january/an-example-of-html5-canvas-drag-n-drop.html -->

Я создал то же самое на этом JSFiddle но перетаскиванием по-прежнему не работает.

Я новичок в html5 и javascript, поэтому я уверен, что это должно быть что-то очень просто. Я пропускаю, но я не могу понять, что это такое.

Ваша помощь в этом была бы очень признательна, большое вам спасибо.

источник

2013-10-25 perl-user

Я вставил свой код JavaScript между тегами <script> и </script> и переместить его из JavaScript в HTML и я добавил новую ссылку сценария из примера страницы:

<script src="http://www.rgraph.net/libraries/RGraph.common.core.js" ></script>

JSFiddle - working example

Так что я подумайте, что вы должны загрузить и вставить основные файлы RGraph в ваш код из этого page.

источник

2013-10-25 10:01:05 pes502

Отлично, большое спасибо, ваш пример отлично работал. Также как вы можете добавить несколько изображений на эти холсты? Я разработал, как создать третий и четвертый холсты для перетаскивания между ними, но не может создать больше одного изображения. большое спасибо за вашу помощь –

Любые мысли по вышесказанному? спасибо большое –

Sry, я понятия не имею, как отредактировать этот код ... но я думаю, что вы должны создать массив изображений, а затем отредактировать и повторить функцию Draw() для каждого изображения, но я не знаю, как писать :) Мои навыки PHP5 и JS не так хороши :( – pes502

HTML5/Javascript - Идеальный пример перетаскивания между несколькими полотнами не работает

ответ

Смежные вопросы