Как использовать событие ondrag в HTML5 для изменения позиции элемента? - PullRequest
Новая
       2

Как использовать событие ondrag в HTML5 для изменения позиции элемента?

3 голосов
/ 27 сентября 2011

Например:

https://github.com/lbj96347/easypost/blob/master/test.html

(ps: у вас должен быть jquery и файл css страницы. :-))

Мне нравится эта страница,вы можете использовать расширение jquery, чтобы изменить положение элемента.

Но html5 и т. е. предлагает нам Drags api.Like ondrag ondragend и т. д.Я не могу определить положение мыши на странице, поэтому я не могу добиться такого эффекта, как расширение jquery.

Хорошо, как я могу использовать Drags API для достижения этого эффекта?

Спасибовы.

1 Ответ

0 голосов
/ 26 апреля 2016

Настоятельно рекомендуем прочитать «Бедствие с перетаскиванием HTML5» . 

<!DOCTYPE html>
<html>
  <head>
      <style>
          html {
              height: 100%;
          }

          body {
              margin: 0;
              padding: 0;
              height: 100%;
          }

          section {
              height: 100%;
          }

          div {
              width: 40px;
              height: 40px;
              position: absolute;
              background-color: #000;
          }
      </style>
  </head>
  <body>
      <section ondragenter="return drag_enter( event )" ondrop="return drag_drop( event )" ondragover="return drag_over( event )">
          <div id="item" draggable="true" ondragstart="return drag_start( event )"></div>
      </section>
      <script>
          function drag_enter( action )
          {
             action.preventDefault( );

             return true;
          }

          function drag_over( action )
          {
              action.preventDefault( );
          }

          function drag_start( action )
          {
               action.dataTransfer.effectAllowed = 'move';
               action.dataTransfer.setData( 'id', action.target.getAttribute( 'id' ) );

               return true;
          }

          function drag_drop( action )
          {
              var id = action.dataTransfer.getData( 'id' );

              var element = document.getElementById( id );
              element.style.top = action.clientY + 'px';
              element.style.left = action.clientX + 'px';

              if ( action.stopPropagation )
              {
                  action.stopPropagation( );
              }

              return false;
          }
      </script>
  </body>
</html>

Дополнительная литература

API перетаскивания HTML

Собственный перетаскивание HTML5

Собственное перетаскивание

...