Перетащите холст вокруг экрана браузера

Я новичок в Рафаэле, а также в JS .. Мне нужно уметь перетащить сам Canvas, а не объект в него, в разные места на экране. Я всюду смотрел в Интернете и не мог найти подсказки. Конечно, пользователь должен будет попытаться схватить холст в каком-то свободном месте ... без детских объектов ...Перетащите холст вокруг экрана браузера

Любой ключ был бы благодарен.

Вот как я построил Холст на этом сайте:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
    <title>Raphael Play</title> 
    <script type="text/javascript" src="js/raphael.js"></script> 
    <script type="text/javascript" src="js/mood.js"></script> 
    <style type="text/css"> 
      #canvas_container { 
      position:absolute; 
       width: 803; 
      left:200px; 
      top:100px; 
      border: 0px solid #555; 
      -webkit-box-shadow: 0px 0px 84px #999; 
      -moz-box-shadow: 0px 0px 84px #999; 
      box-shadow: 0px 0px 84px #000; 
      border-radius: 20px 20px 20px 20px; 
      background-color:#fff; 
      background-image:url(static/VAZZZ.png); 
      } 
    </style> 
    </head> 
    <body> 
     <div id="canvas_container" ></div> 
    </body> 
</html>

источник

2011-12-29 DKean

Вот кроссбраузерный функция перетаскивания и события слушателем для <div>.

http://jsfiddle.net/MtbJe/

Ваш CSS был неполным (высота не указана и ширина не хватает "точек").
Коробка-тень значительно снижает плавность перетаскивания, вы можете захотеть использовать изображение в этом случае (удалите тень окна, чтобы увидеть, насколько она более плавная).
Если вы хотите сделать что-то еще в пользовательском интерфейсе фактическим обработчиком перетаскивания (но все же переместите весь <div>), вам нужно будет изменить прослушиватель событий для этого элемента и изменить 15-ю строку JavaScript:
```
var dragObj = e.target ? e.target : e.srcElement; 
```
к чему-то вроде:
```
var dragObj = e.target ? e.target.parentNode : e.srcElement.parentNode; 
```

Я имел этот код сохранен в течение многих лет, и я считаю, что оригинальный автор http://www.quirksmode.org/ т но я его больше не вижу. Вы найдете много отличной информации о JS на этом сайте. Опять же, это кросс-браузерный скрипт, который я не уверен, что вам нужно, чтобы вы использовали холст. Если вы очень новичок в JS и работаете с DOM, я уверен, что код будет немного запутанным, и я призываю вас задать дополнительные вопросы.

источник

2011-12-29 02:19:19 skyline3000

Wow, Sameera, вы действительно знаете свои вещи! – DKean

Но я не могу заставить его работать. Я поместил код JS, который вы предоставили между тегами скрипта в заголовке. Как вы подозреваете, я совершенно не знаком с JS! – DKean

Я вижу, что в Fiddle, если вы поймаете холст рядом с краем, холст выпадает. Вы предложили использовать ребенка для перетаскивания родителя. Я видел эту проблему в FoxPro. Ребенок следует за мышью быстрее, чем форма, и родитель никогда не выпадает. Так что, к сожалению, вам это предвидеть. Я впечатлен. – DKean

Перетащите холст вокруг экрана браузера

ответ

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