Перетащите холст вокруг экрана браузера - PullRequest
Новая
       21

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

0 голосов
/ 29 декабря 2011

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

Любая подсказка будет принята с благодарностью.

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

<!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>

1 Ответ

1 голос
/ 29 декабря 2011

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

http://jsfiddle.net/MtbJe/

  • Ваш CSS был неполным (высота не указана, а ширина отсутствует "px").
  • Рамка-тень значительно снижает плавность перетаскивания, вы можете использовать изображение в этом случае (удалите рамку-тень, чтобы увидеть, насколько она более гладкая).

  • Если вы хотите сделать что-то еще в пользовательском интерфейсе фактическим обработчиком перетаскивания (но все же переместите весь <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 на этом сайте. Опять же, это кросс-браузерный скрипт, который я не уверен, что вам нужно, если вы используете canvas. Если вы новичок в JS и работаете с DOM, то я уверен, что код будет выглядеть немного запутанным, и я призываю вас задать дополнительные вопросы.

...