精华内容
下载资源
问答
  • drag

    2017-05-16 12:15:00
    Drag-and-drop(拖拽) 是一种很流行的交互方式。 D3的 drag behavior 为[selections](https://github.com/d3/d3-selection交互, 例如你可以使用拖拽交互来增强 力导向效果,或者拖拽力学仿真中相互碰撞的圆: JS Bin ...

    简述

    Drag-and-drop(拖拽) 是一种很流行的交互方式。 D3的 drag behavior 为[selections](https://github.com/d3/d3-selection交互, 例如你可以使用拖拽交互来增强 力导向效果,或者拖拽力学仿真中相互碰撞的圆:

    JS Bin on jsbin.com

    你也可以使用拖拽交互来做一些传统的控件,比如滑块等。但是拖拽交互并不局限于移动元素,有很多种响应拖拽操作的方式,比如可以使用它来套索散点图中的元素,或者使用canvas画图。

    拖拽交互对元素不敏感,所以你可以将其应用在SVG,HTML甚至Canvas上。并且可以通过其他技术手段对其进行扩展,比如可以将Voronoi叠加到目标元素上:

    JS Bin on jsbin.com JS Bin on jsbin.com

    有一点好处,那就是拖拽操作统一了鼠标触摸输入,并且屏蔽了浏览器的差异性。如果支持Pointer Events 那么也支持拖拽操作。

    W3C对Pointer的定义为:以任何输入设备在屏幕上做出接触点的效果,比如鼠标,笔,触摸等。

    A pointer can be any point of contact on the screen made by a mouse cursor, pen, touch (including multi-touch), or other pointing input device

    Installing

    NPM等安装方法略

    <script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
    <script src="https://d3js.org/d3-selection.v1.min.js"></script>
    <script src="https://d3js.org/d3-drag.v1.min.js"></script>
    <script>
    
    var drag = d3.drag();
    
    </script>
    

    Try d3-drag in your browser.

    API Reference

    下面的表格描述了拖拽事件与原始Pointer Event之间的对应关系:

    EventListening ElementDrag EventDefault Prevented?
    mousedown? selection start no¹
    mousemove² window¹ drag yes
    mouseup² window¹ end yes
    dragstart² window - yes
    selectstart² window - yes
    click³ window - yes
    touchstart selection start no?
    touchmove selection drag yes
    touchend selection end no?
    touchcancel selection end no?

    所有的事件传播会被阻止,如果要防止某些非拖拽事件触发拖拽事件监听器,则要设置 drag.filter来对事件进行过滤.

    # d3.drag() <>

    创建一个新的拖拽操作,返回一个drag, 它是一个对象方法。一般通过 selection.call将其应用在指定的选择集上.

    # drag(selection) <>

    将拖拽操作应用到指定的选择集。这个方法并不会直接使用,在内部通过使用 selection.call间接调用. 比如使用如下方法为选择集添加拖拽事件:

    d3.selectAll(".node").call(d3.drag().on("start", started));
    

    在内部,拖拽操作通过selection.on 来为元素添加监听事件. 事件监听器使用 .drag 来标识这是一个拖拽事件, 所以你可以通过如下方法来取消拖拽操作:

    selection.on(".drag", null);
    

    应用拖拽操作时,在IOS上也会同步改变 -webkit-tap-highlight-color 来高亮显示拖拽的元素,如果你想自定义高亮颜色,则需要在应用拖拽交互后移除或重新应用这个样式.

    # drag.container([container]) <>

    拖拽事件中,当前的鼠标坐标是常常被使用到的,那么当前的鼠标位置如何计算,是相对于哪个祖先元素?这就需要通过container来设置。

    如果指定了container,则设置拖拽事件的相对祖先元素,并返回当前的拖拽对象。如果没有设置container则返回当前的祖先元素访问器,默认:

    function container() {
      return this.parentNode;
    }
    

    container指定了拖拽事件的坐标系统,对 event.x 和 event.y有影响. 由container访问器返回的元素最后会被传给d3.moused3.touch 来计算事件的具体坐标.

    默认的容器访问器返回选择集的父级元素,这种默认设置经常被用来操作SVG和HTML,因为这些元素通常使用相对父元素的定位来获取坐标。如果拖拽Canvas上的图元元素,则需要设置容器为元素自身:

    function container() {
      return this;
    }
    

    当然也可以直接设置,而不是使用访问器的形式,比如drag.container(canvas).

    # drag.filter([filter]) <>

    如果指定了 filter,则设置事件过滤器,并返回拖拽行为,如果没有指定 filter 则返回当前的过滤器,默认为:

    function filter() {
      return !d3.event.button;
    }
    

    如果过滤器返回false,则会忽略这个事件,并没有拖拽行为发生。过滤器决定了哪些输入事件应当被忽略。默认的过滤器会忽略辅助按钮上的鼠标按下事件,因为这些按钮通常有其他的目的,比如菜单按钮.

    # drag.subject([subject]) <>

    如果subject指定了,则设置当前的 subject 访问器为指定的对象或者函数,并返回当前的拖拽操作。如果没有指定subject,则返回当前的 subject 访问器,默认为:

    function subject(d) {
      return d == null ? {x: event.x, y: event.y} : d;
    }
    

    subject 表示 当前正被拖拽的东西。当接收到输入事件时被计算得到,比如鼠标按下或者开始触摸等在拖拽开始之前。然后 subject 作为event.subject被附加到drag events上。

    默认的 subject 是接收拖拽事件的原始元素上绑定的datum;如果datum未定义,则表示指针坐标位置的对象会被创建。当在SVG中拖拽圆时,默认的subject就是当前被拖拽圆上绑定的数据。当使用Canvas时,默认的subject就是当前canvas元素上的datum(无论你点击的是canvas上的哪个位置)。当使用canvas时,自定义的subject访问器就显得非常重要了,比如在当前位置指定半径区域内选取一个圆表示当前被拖拽的对象:

    function subject() {
      var n = circles.length,
          i,
          dx,
          dy,
          d2,
          s2 = radius * radius,
          circle,
          subject;
    
      for (i = 0; i < n; ++i) {
        circle = circles[i];
        dx = d3.event.x - circle.x;
        dy = d3.event.y - circle.y;
        d2 = dx * dx + dy * dy;
        if (d2 < s2) subject = circle, s2 = d2;
      }
    
      return subject;
    }
    

    如果需要的话,上述操作可以使用quadtree.find来加速。

    返回的subject应该是一个包含x和y属性的对象,所以subject和指针在拖拽过程中的相对位置可以保持。如果subject为null或者undefined,则不会启动拖拽手势;然而,其他的起始点也可以启动 拖拽手势,参考drag.filter。

    拖拽过程中的subject可能在拖拽过程中没有变化。拖拽访问器和selection.on事件会以相同的上下文和参数被调用:当前数据d,索引i以及指向当前DOM元素的this。在对subject访问器进行计算过程中,d3.event是一个先于drag event启动的事件。使用event.sourceEvent可以访问原始事件,event.identifier可以访问原始触摸标识符。event.x 和 event.y坐标是想对于container并使用d3.mouse 或 d3.touch计算的,

    # drag.on(typenames, [listener]) <>

    如果指定了listener,则将其设置为指定类型的回调事件,并返回拖拽对象。如果已经为执行的typename注册了监听器,则会将其覆盖。如果listener为null,则相当于移除typename对应的监听器。如果没有指定listener,则返回与typename匹配的第一个监听器。当事件发生时,对应的监听器将会被执行,并传递当前元素绑定的数据 d 和索引 i, this 指向当前DOM元素.

    typenames 是一个或多个由空格分割的字符串. 每个 typename 都是一个可以由(.)分割的 typename, 比如drag.foodrag.bar; name 允许为同一种type添加多个监听器,而type必须为如下几种:

    • start - 开始拖拽 (对应 mousedown 或 touchstart).
    • drag - 拖拽中 (对应 mousemove 或 touchmove).
    • end - 拖拽结束 (对应 mouseup, touchend 或 touchcancel).

    参考 dispatch.on 获取更多信息.

    # d3.dragDisable(window) <>

    阻止指定窗口上的原生拖拽和文本选择事件。

    # d3.dragEnable(window[, noclick]) <>

    启用指定window上的原生拖拽和文本选择事件,取消d3.dragDisable的影响.

    Drag Events

    When a drag event listener is invoked, d3.event is set to the current drag event. The event object exposes several fields:

    • target - the associated drag behavior.
    • type - 事件类型, “start”, “drag” or “end”; 参考 drag.on.
    • subject - 由 drag.subject定义的.
    • x - 新的 x-坐标,鼠标当前的位置.
    • y - 新的 y-坐标,鼠标当前的位置.
    • dx - 相对与上个拖拽事件的x-方向的偏移.
    • dy - 相对与上个拖拽事件的y-方向的偏移.
    • identifier - 触发事件的设备, “mouse”, 或 touch identifier.
    • active - 当前活动的拖放操作数量.
    • sourceEvent - 底层原生事件, 比如mousemove 或 touchmove.

    event.active 在多个拖放并发进行时是有用的。记录了同时进行拖放操作的数量。

    The event object also exposes the event.on method.

    # event.on(typenames, [listener]) <>

    相当于drag.on, 但是只能应用于当前的拖拽操作。在进行拖拽之前,会创建一个event listeners 副本. 这个副本通过event.on被绑定到当前的拖拽操作。这可以用来创建一个临时的拖拽监听器,例如通过闭包创建一个临时的拖拽事件监听器:

    function started() {
      var circle = d3.select(this).classed("dragging", true);
    
      d3.event.on("drag", dragged).on("end", ended);
    
      function dragged(d) {
        circle.raise().attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
      }
    
      function ended() {
        circle.classed("dragging", false);
      }
    }
    

    转载于:https://www.cnblogs.com/yaoyinglong/p/drag.html

    展开全文
  • Drag problem

    2021-01-07 17:10:36
    <div><p>A simple click to an item make start drag, you need to click second time to stop drag.</p><p>该提问来源于开源项目:darsain/sly</p></div>
  • enableDrag

    2020-12-27 11:15:52
    But the issue is that if you drag it to a position and then drag it again it goes to the first row again. So if you have a lot of LI's in the roundabout and enable dragging, you can never reach ...
  • Drag boundaries

    2020-12-26 08:18:05
    <div><p>Hi Is it possible to set a drag boundary ? So you can't drag past that boundary? <p>Thanks</p><p>该提问来源于开源项目:isocra/TableDnD</p></div>
  • Drag Inertia

    2020-12-09 06:49:26
    <div><p>Hey guys - is it possible to include some level of animated inertia to the drag? Also any possibility of including scroll capture in the element as well? </p><p>该提问来源于开源项目:...
  • Drag icons

    2020-12-01 11:35:08
    <ul><li>[x] set up drag icon listeners</li><li>[x] render drag icon surfaces</li><li>[x] surface rendering abstractions</li><li>[ ] update to latest wlroots-rs</li></ul>该提问来源于开源项目:...
  • drag handle

    2020-11-30 13:18:08
    <div><p>Is there any way i can add drag handle css? I have a bootstrap panel inside the widget and i want to move the widget using panel header only. Other thing is if i want to select a label text ...
  • <div><p>can anyone know how to disable the drag function in this plugin? thanks....</p><p>该提问来源于开源项目:Studio-42/elFinder</p></div>
  • panel Drag

    2020-12-09 00:16:22
    <div><p>is it possible panel drag within window ???</p><p>该提问来源于开源项目:thecodeholic/lobipanel</p></div>
  • when I try to drag and drop elements I find that the drag is never initiated. I have tried different permutations of actions; e.g. normal drag and drop, moving the mouse a little bit to instantiate ...
  • Touch Drag Inside:手指在控件窗口内拖动 Touch Drag Outside:手指在控件窗口外拖动 Touch Drag Enter:手指从控件窗口外部拖动到内部 Touch Drag Exit:手指从控件窗口内部拖动到外部 [依据] 来自Apple官方...

    Touch Drag Inside:手指在控件窗口内拖动

    Touch Drag Outside:手指在控件窗口外拖动

    Touch Drag Enter:手指从控件窗口外部拖动到内部

    Touch Drag Exit:手指从控件窗口内部拖动到外部


    [依据] 来自Apple官方文档 UIControlEvents

    UIControlEventTouchDragInside:An event where a finger is dragged inside the bounds of the control.

    UIControlEventTouchDragOutside:An event where a finger is dragged just outside the bounds of the control.

    UIControlEventTouchDragEnter:An event where a finger is dragged into the bounds of the control.

    UIControlEventTouchDragExit:An event where a finger is dragged from within a control to outside its bounds.

    展开全文
  • m curious about drag points / drag lines. I was thinking about implementing data points manipulation using drag points, but it was almost impossible to understand how to retrieve the current position ...
  • Plug drag drop

    2020-12-29 05:58:12
    <div><p>This pull request implements drag and drop between the plugs in the NodeEditor. Drags are initiated on the label for the plug. Left drag initiates a drag for connecting plugs. Shift-left drag ...
  • <div><p>I am using draggabilly to move a volume slider, but also allow clicking on the container element to reposition the drag element. In the case that a user clicks on the container element, and I ...
  • Fix drag move

    2020-12-04 16:31:16
    <div><p>Fixes drag position and limits because of a subtle change/improvement in .getPosition that excludes borders now. <p>...
  • Noisy drag events

    2020-12-27 17:18:52
    <div><p>While dragging, the Drag component seems to emit a drag event every couple of milliseconds. This swamps the event view in my DevTools (to the point of hanging up my DevTools). <p>Would be ...
  • Creating drag images

    2020-11-30 12:11:22
    <p>I tried using rasterizeHTML to <a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage">create a drag-image</a> for the HTML5 drag-and-drop API, but no luck so far....
  • Ui drag update

    2021-01-09 00:35:10
    <div><p>Changes to UI Drag behavior to allow making UI elements with more interesting drag behaviors (eg, multi-touch support, different behaviors for different button combinations, consistent drag ...
  • Setting Drag Tolerance

    2021-01-10 04:12:37
    <div><p>We are encountering an issue where Kinetic is confusing the click and drag event. Boils down to the user clicking and moving their mouse ever so slightly, drag is killing the click event. <p>...
  • Drag between lists

    2020-12-09 02:34:34
    I see the example that its from a drag to a drop-list, but I want can drag bewteen the lists. <p>For context, I try to make a solitarie. <p>Thanks and amazing lib!</p><p>该提问来源于开源项目:...
  • <div><p>I am using slickgrid in combination with fullcalendar and some custom component using native drag and drop. <p>Problem: <p>Native drag and drop does not work in our whole application, since ...
  • directly down), it will enter the <code>interacted</code> state and hide itself (opacity: 0 CSS rule), but the drag preview (rendered by EventContainerWrapper) will not display until you drag the ...
  • Drag dialog fix

    2020-12-01 17:43:45
    <div><p>Fixes Drag menu bug #204, repositions character info screens over their buttons, and makes them drag only from their top borders.</p><p>该提问来源于开源项目:wheybags/freeablo</p></div>
  • Drag between months

    2020-11-22 08:33:43
    t possible to drag an event between months ? <h3>Description <p>On month view, when an user drag an event, arrows could to be displayed on the sides. The user could to drag the event on it to change ...
  • drag-loading.js

    2021-01-14 08:41:48
    drag-loading.js
  • Drag & Drop

    2020-12-27 14:46:13
    <p>Discussion in <a href="https://www.w3.org/TR/html52/editing.html#drag-and-drop">2 Feb 2017 ARIA telecon</a>. Note this is HTML 5.2, not 5.1 like the other HTML parity issues.</p><p>该提问来源于开源...
  • Map drag problem

    2021-01-11 07:06:37
    t click to map to drag view in map view, only can use navigation button(left right top down button) to change map view. example: When i use mouse to drag view => so hard ...
  • <div><p>The <code>drag</code> class is convenient, but for now it looks like stays even if the user stops dragging something over the app. We should remove it when that happens.</p><p>该提问来源于开源...
  • jquery drag

    2019-10-06 01:56:47
    jquery drag http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/http://arlen-yeh.javaeye.com/blog/396102 ...

    http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/

    http://arlen-yeh.javaeye.com/blog/396102

    posted on 2010-09-26 08:18 lexus 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/lexus/archive/2010/09/26/1835246.html

    展开全文
  • drag & drop

    2020-12-09 14:12:00
    <div><p>I am trying to make the tree drag/droppable but no matter what, it doesnt start working.. I have a custom rowRenderer which sets the treeNodeAttributes to true, the tree has droppable: true (I...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,019
精华内容 10,807
关键字:

drag