Question

例如：

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

（p.s：你应该有jquery和页面的css文件。： - ））

与此页面一样，您可以使用jquery扩展名来更改元素的位置。

但是html5和ie为我们提供了drai api.Like ondrag ondragend等等。

当我使用新事件时，我无法获得鼠标在页面上的位置，因此我无法像jquery扩展那样实现效果。

好的，我如何使用drags api来实现这种效果？

谢谢。

Answer 1

强烈建议您阅读'The HTML5 drag and drop disaster'。

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

进一步阅读

HTML Drag and Drop API

Native HTML5 Drag and Drop

Native Drag and Drop

如何使用HTML5 ondrag事件来改变元素的位置？

1 个答案: