dart-dnd, 使用鼠标和触摸屏支持飞镖网络应用

分享于 

8分钟阅读

GitHub

  繁體 雙語
Drag and Drop for Dart web apps with mouse and touch support.
  • 源代码名称:dart-dnd
  • 源代码网址:http://www.github.com/marcojakob/dart-dnd
  • dart-dnd源代码文档
  • dart-dnd源代码下载
  • Git URL:
    git://www.github.com/marcojakob/dart-dnd.git
    Git Clone代码到本地:
    git clone http://www.github.com/marcojakob/dart-dnd
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/marcojakob/dart-dnd
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    Dart 拖放

    使用鼠标和触摸屏支持 Dart 网络应用程序。

    Star this RepoPub Package

    ,|,|,,

    DnD Screenshot

    特性

    • 使用任何HTML元素作为 Draggable 或者 Dropzone
    • 鼠标和触摸拖动。
    • 可以拖动事件:dragStartdragdragEnd
    • Dropzone事件:dragEnterdragOverdragLeavedrop
    • 将头像拖动为拖动操作的可视指示符:
      • 原始元素作为拖动头像。
      • 克隆为拖曳头像。
      • 自定义拖动头像。
    • 对影子 DOM ( Web组件,自定义元素,聚合物,等等 )的支持。
    • 更多。参见示例。

    用法

    在阅读指令 below 之前,你应该先看一下示例。

    基本设置

    创建一个 Draggable 并给它一些HTML元素;这将使它们可以拖动。 你可以将单个 Element 传递给构造函数,也可以传递由 querySelectorAll 返回的ElementList

    如果你还想放在某个地方,你需要一个 Dropzone

    //Install draggable (no avatar).Draggable draggable =newDraggable(querySelectorAll('.draggable'));//Install dropzone.Dropzone dropzone =newDropzone(querySelector('.dropzone'));

    你很可能需要一些收费的drag来向用户展示一个拖拉发生。 有两个预定义的AvatarHandler,你可以如下所示。 但是你也可以提供你自己的AvatarHandler 实现。

    //Draggable with clone as avatar.Draggable draggable =newDraggable(querySelectorAll('.draggable'),
     avatarHandler:newAvatarHandler.clone());//Draggable with original element as avatar.Draggable draggable =newDraggable(querySelectorAll('.draggable'),
     avatarHandler:newAvatarHandler.original());

    可以拖动选项

    可以将以下选项作为命名参数传递给 Draggable的构造函数:

    • AvatarHandler: 负责创建,定位和删除拖动头像。 拖动化身在拖动操作期间提供视觉反馈。 以下是( 有关示例,请参见 上面 )的可能选项:

      • null ( 默认值) - 将不会创建拖动头像
      • new AvatarHandler.original() - 使用原始可以拖动作为化身的处理程序。 查看 OriginalAvatarHandler
      • new AvatarHandler.clone() - 使用可以拖动元素的克隆作为化身的处理程序。 查看 CloneAvatarHandler
      • 自定义 AvatarHandler - 你可以提供你自己的AvatarHandler 实现。
    • horizontalOnly: 如果设置为 true,则只跟踪水平拖动。 这样就可以使用垂直拖动拖动来滚动。

    • verticalOnly: 如果设置为 true,则只跟踪垂直拖动。 这使得水平触摸拖动可以用于滚动。

    • handle: 如果指定了句柄查询字符串,它将限制拖动,除非在指定的element(s) 上发生。 只允许从draggables元素中下降的元素。

    • cancel: 如果指定了取消查询字符串,则在指定的元素上阻止开始的拖动。

    • draggingClass: 在拖动过程中,css类是否被设置为被拖动的元素。 如果设置为空,则不会添加这样的css类。

    • draggingClassBody: 在拖动过程中,css类是否设置为 html body 标记。 如果设置为空,则不会添加这样的css类。

    可以拖动事件

    可用事件 StreamDraggable 上:

    • onDragStart: 当用户开始拖动时激发。
      注意:是在touchStart或者mouseDown上触发的,但一旦存在拖动运动。 当拖动开始时,onDrag 事件也会被触发。

    • onDrag: 在整个拖动操作期间定期触发。

    • onDragEnd: 当用户结束拖动时激发。
      注意:当用户单击-key或者窗口失去焦点时,也会激发。

    Dropzone选项

    可以将以下选项作为命名参数传递给 Dropzone的构造函数:

    • acceptor: 用于确定这里 Dropzone 将接受哪些 Draggable。 如果没有指定,所有 Draggable 将被接受。

    • overClass: 当被接受的可以拖动拖动到dropzone元素上时,它是否被设置为元素。 如果设置为空,则不会添加这样的css类。

    • invalidClass: 当将不接受的可以拖动拖动到dropzone元素上时,它是否被设置为元素。 如果设置为空,则不会添加这样的css类。

    Dropzone事件

    可用事件 StreamDropzone 上:

    • onDragEnter: 当 Draggable 进入这里 Dropzone 时激发。

    • onDragOver: 当 DraggableDropzone 上移动时定期触发。

    • onDragLeave: 当 Draggable 离开这里 Dropzone 时激发。

    • onDrop: 在将 Draggable 删除到这里时触发。

    注意:只有当服务器接受 Draggable 时,才会触发 Dropzone 事件。

    阴影 DOM

    Web组件通过阴影DOM创建一个漂亮的ecapsulation。 但是这会造成 dropzones inside 出现问题,因为它们永远不会接收事件,因为所有事件都是由宿主元素捕获的。 为了使这项工作工作,我们需要通过递归 elementFromPoint() 调用将事件重定位到影子DOM子元素。

    出于性能原因,重新定位所有拖放事件是没有意义的。 如果希望将事件重新定位到影子DOM子级,则必须向主机添加 dnd-retarget 属性:

    //Retarget drag and drop events to Shadow DOM children.<my-element dnd-retarget></my-element>

    属性

    省 Dart 图书馆灵感来源于

    感谢你的工作 !

    许可证

    麻省理工学院许可证( MIT )


    WEB  SUP  触摸  拖动  鼠标  drag-drop