标签: drag-and-drop

HTML5拖放以在屏幕上的任何位置移动div?

标题非常自我解释.

我发现的所有演示都包括将div放到某个位置.EG垃圾桶.我需要创建一个可拖放的div,可以放在屏幕上的任何位置.

是否可以使用HTML5执行此操作?如果不是我应该怎么做?

html5 drag-and-drop

25
推荐指数
1
解决办法
6万
查看次数

HTML5拖放getData()仅适用于Chrome中的drop事件?

我目前正在开发一个使用HTML5拖放API的项目来提供附加功能,包括将项目拖入和拖出浏览器.我目前遇到特定于Chrome的问题(否则只在Firefox中测试,它按预期工作).

问题是我不能使用该event.dataTransfer.getData(type)方法dragstart在除事件之外的任何事件中返回事件上的数据集drop.

在绑定到dragstart事件(发生火灾)后,我设置了这样的事件:

event.dataTransfer.setData('text/plain', "some string")
Run Code Online (Sandbox Code Playgroud)

然后在这个drop事件中,我可以得到数据.

event.dataTransfer.getData('text/plain')
Run Code Online (Sandbox Code Playgroud)

但是我不能在任何其他事件(例如dragover)上使用与上面相同的方法.即使我在调用之后尝试在线上使用上面的方法setData()(即在dragstart回调中),它仍然会返回undefined.

因此,在Chrome中,问题是getDataChrome会始终返回undefined,但drop事件回调除外.(在Firefox中,我可以成功获取正确的数据.)

如果你有对dataTransfer同一个拖动元素的对象的引用,那么为什么在删除数据之前你不能获取数据呢?

就是想:

  • 以前有没有人遇到Chrome的这个问题?
  • 有什么变通方法?
  • 或者,Chrome需要解决的问题是什么?

资源: HTML5拖放规范.

javascript html5 drag-and-drop

25
推荐指数
2
解决办法
1万
查看次数

如何在React native中创建拖放操作?

假设我有两个视图,A和B.我希望能够在触摸视图A时触发'dragAndDropStart'事件,然后启用从A到B的拖放...在整个过程中向用户显示反馈(即显示在视图A和用户手指之间出现的一条线).在下降(释放拖动手势)时,我想触发另一个'dragAndDropEnd'事件,这次是在视图B上.

在此输入图像描述

touchStart和touchEnd处理程序太有限了,因为它们似乎不允许将手势从一个View切换到另一个View.它们似乎也没有启用中间"拖动"状态.

关于使用手势处理程序的React原生文档有点神秘,我还没有看到任何证明它们使用的示例.

有任何想法吗?

drag-and-drop gesture ios react-native

25
推荐指数
1
解决办法
7215
查看次数

Android - 拖放 - 动画阴影到目的地

我想动画ShadowView一些坐标(到目标视图).

我正在使用D&D,如果用户使用drop(DragEvent.ACTION_DROP),那么在某些区域中的视图我想要为视图设置动画(从放置位置)到某个目标视图.

我不想从源位置动画视图,但想从DROP位置进行操作.

我尝试了很多东西,但没有任何作用.我怎样才能访问ShadowView?这也行不通:

EventDragShadowBuilder.getView()
Run Code Online (Sandbox Code Playgroud)

我认为TranslateAnimation应该适用于此,但我需要在D&D期间访问"阴影"视图.

图片: 在此输入图像描述

animation android drag-and-drop

25
推荐指数
1
解决办法
1463
查看次数

如何确定HTML5 drag'n'drop文件上传API的存在(如FF3.6中的那个)

我正在编写一个应该支持文件的HTML5拖放API的应用程序,就像这里描述的那样.我想对浏览器是否支持这种疯狂进行编程检查:)现在有效的解决方案是检查浏览器是否提供了FileReader类,如下所示:

  if (typeof(FileReader) == "undefined") {
    $("#dropbox").hide();
  } else {
    // connect events
    $("#filebox").hide();
  }
Run Code Online (Sandbox Code Playgroud)

但它显然不是正确的(我根本不使用那个类).

有任何想法吗?

javascript html5 drag-and-drop

24
推荐指数
3
解决办法
2万
查看次数

如果事件处理程序尚不存在,如何绑定它?

我有一个页面,我想将拖放事件绑定到.我希望浏览器中的整个页面成为放置目标,因此我将事件绑定到document对象上.我的应用程序的内容通过AJAX加载到主内容区域,我只希望这些事件处理程序在上传页面当前可见时处于活动状态.

现在,我在检索上传页面时绑定事件处理程序; 但是,每次上传页面变为活动状态时,它都会绑定一个新的事件处理程序,这会导致处理程序在用户转到上传页面时离开多次,然后返回.我想我可以解决这个问题,如果我只能在它尚未绑定时才能使处理程序绑定.这是可能的,还是我忽略了一个更好的选择?

相关代码,如果有帮助:

$(document).bind('dragenter', function(e) {
    e.stopPropagation();
    e.preventDefault();
}).bind('dragover', function(e) {
    e.stopPropagation();
    e.preventDefault();
}).bind('drop', function(e) {
    e.stopPropagation();
    e.preventDefault();
    self._handleFileSelections(e.originalEvent.dataTransfer.files);
});
Run Code Online (Sandbox Code Playgroud)

jquery drag-and-drop event-handling

24
推荐指数
1
解决办法
1万
查看次数

将数据拖放到闪亮的应用程序中

如何将数据拖放到闪亮的应用程序中?我可以拖放到一个区域并用javascript读取它,但我不知道如何闪亮注册它所以我可以在服务器上处理它.这是一个示例设置 - 它有点长b/c我不认为有内置的javascript函数来处理拖放操作.

当运行并且拖入数据集"dat.csv"时,它当前应该如下所示.目标是将已拖放到变量中的数据注册到input可以在R中处理的数据中. 在此输入图像描述

ui.R

library(shiny)

ui <- shinyUI(
  fluidPage(
    tags$head(tags$link(rel="stylesheet", href="css/styles.css", type="text/css"),
      tags$script(src="getdata.js")),
    h3(id="data-title", "Drop Datasets"),
    div(class="col-xs-12", id="drop-area", ondragover="dragOver(event)", 
      ondrop="dropData(event)"),
    tableOutput('table'),  # doesn't do anything now

    ## debug
    div(class="col-xs-12",
      tags$hr(style="border:1px solid grey;width:150%"),
      tags$button(id="showData", "Show", class="btn btn-info", 
        onclick="printData('dat.csv')")),
    div(id="data-output")  # print the data
  )
)
Run Code Online (Sandbox Code Playgroud)

server.R

## Make a sample dataset
# write.csv(data.frame(a=1:10, b=letters[1:10]), "dat.csv", row.names=FALSE)
server <- function(input, output, session) {
  output$table <- renderTable(input$data)  # this variable doesn't exist
}
Run Code Online (Sandbox Code Playgroud)

WWW/getdata.js

var datasets = {};
var dragOver …
Run Code Online (Sandbox Code Playgroud)

javascript drag-and-drop r shiny

24
推荐指数
2
解决办法
3666
查看次数

UWP ListView/GridView DragItems导致灾难性故障

我们正在开发一个UWP应用程序,它需要能够将项目从一个GridView拖动到另一个GridView.在测试此功能时,我们遇到了多次灾难性故障0x80000FFFF.

灾难性失败的屏幕截图

经过近2天的研究,我们无法找到解决问题的方法.我们发现这些故障发生了,当为GridView设置了ItemTemplate时,项目被拖出.

甚至尝试从Microsoft"XamlDragAndDrop"提供的官方拖放示例,(https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlDragAndDrop),当你拖动Scenario1中的项目时源ListView到目标ListView(~30-50)次,你也会遇到失败.

之前有其他人遇到过这个问题吗?我们非常感谢任何建议!

我们开发的机器运行Windows 10 Enterprise,版本1803,操作系统版本17134.285.

在官方GitHub回购中打开了一个问题. https://github.com/Microsoft/Windows-universal-samples/issues/977

我录制了一个样本崩溃的小视频. https://1drv.ms/v/s!AiZ-jksNqbXLi9kZPPfSeGmQr_YeHg

我们在这里管理了获取原生跟踪. 原生痕迹

在释放模式下运行时,它会在之前崩溃,并且在显示热图部分中打开重绘功能时也会崩溃.

c# drag-and-drop uwp

24
推荐指数
1
解决办法
478
查看次数

如何使用JavaScript或jQuery一次拖动多个元素?

我希望能够使用jQuery拖动一组元素,就像我在Windows桌面上选择并拖动多个图标一样.

我找到了threedubmedia的jQuery.event.drag的演示:

http://threedubmedia.com/code/event/drag/demo/multi
http://threedubmedia.com/code/event/drag#demos

我认为这个插件很棒.这是一个很好的流行图书馆吗?您知道使用它的网站或应用程序吗?

是否还有其他库或插件来拖动多个对象?

可以jQuery UI的拖动多个对象?

javascript jquery drag-and-drop jquery-ui jquery-plugins

23
推荐指数
4
解决办法
6万
查看次数

D3力导向图具有拖放支持,以便在删除时固定选定的节点位置

有关力直接图的示例,请访问:http://bl.ocks.org/950642

如何轻松添加拖放支持?它应该将节点设置为固定,并将其放置的当前位置.重要的是,其余节点仍然使用"强制定向模式"自动定位图表中的其余节点

https://github.com/mbostock/d3/wiki/Force-Layout

我玩了一下但没有成功,并想知道是否有人能够给我一个关于如何添加如上所述的支持的快速示例.

drag-and-drop d3.js force-layout

23
推荐指数
1
解决办法
2万
查看次数