标签: drag-and-drop

我遇到的问题dragleave是当悬停该元素的子元素时会触发元素事件.此外,dragenter再次悬停父元素时不会触发.

我做了一个简化的小提琴:http://jsfiddle.net/pimvdb/HU6Mk/1/.

HTML:

<div id="drag" draggable="true">drag me</div>

<hr>

<div id="drop">
    drop here
    <p>child</p>
    parent
</div>

使用以下JavaScript:

$('#drop').bind({
                 dragenter: function() {
                     $(this).addClass('red');
                 },

                 dragleave: function() {
                     $(this).removeClass('red');
                 }
                });

$('#drag').bind({
                 dragstart: function(e) {
                     e.allowedEffect = "copy";
                     e.setData("text/plain", "test");
                 }
                });

它应该做的是通过在div那里拖动东西时使滴红色来通知用户.这样做有效,但是如果你拖入p孩子,那dragleave就会被激发而且div不再是红色.回到跌落div也不会再次变红.有必要完全移出掉落div并再次拖回它以使其变红.

dragleave拖入子元素时是否可以防止触发？

2017更新: TL; DR,查看CSS pointer-events: none;,如下面@ HD的答案中所述,适用于现代浏览器和IE11.

我已经在Borland的Turbo C++环境中看到过这种情况,但是我不知道如何处理我正在研究的C#应用​​程序.是否有最佳实践或需要注意的问题？

有一个漂亮整洁的jQuery插件,允许包含一个JS脚本,然后使用一个简单的代码片段来启用一个表单？像这样的东西:

$j('#MyForm').enableDragDropUploads('.upload-area')

上传目标是表单的操作.

任何解决方案都不能阻止常规文件字段的使用(使用传统的浏览方法).

我一次只需要一个文件,但当然可以选择多个文件也不是坏事.

我发现一对夫妇的拖放上传的例子:
http://www.appelsiini.net/2009/10/drag-and-drop-file-upload-with-google-gears HTTP://www.appelsiini.净/ 2009/10/HTML5的拖放和下拉式多文件上传

但那里的代码没有设置为插件.改变它可能并不太难,但如果其他人已经完成了这项工作并且只是回避我的谷歌搜索,也没有必要这么做.

我理想地寻找纯HTML5/jQuery解决方案.
可以接受Google Gears,但Flash解决方案不是.

我正在向我的页面添加一个html5拖放上传器.

当文件被放入上传区域时,一切都很好.

但是,如果我不小心将文件放在上载区域之外,浏览器会加载本地文件,就像它是一个新页面一样.

我该如何防止这种行为？

谢谢!

概观

我有以下HTML结构,并且我已将dragenter和dragleave事件附加到<div id="dropzone">元素.

<div id="dropzone">
    <div id="dropzone-content">
        <div id="drag-n-drop">
            <div class="text">this is some text</div>
            <div class="text">this is a container with text and images</div>
        </div>
    </div>
</div>

问题

当我将文件拖过时<div id="dropzone">,dragenter事件将按预期触发.但是,当我将鼠标移到子元素上时,例如<div id="drag-n-drop">,dragenter为<div id="drag-n-drop">元素dragleave触发事件,然后为该<div id="dropzone">元素触发事件.

如果我<div id="dropzone">再次将鼠标悬停在该元素上,dragenter则会再次触发该事件,这很酷,但随后dragleave会为刚刚离开的子元素触发事件,因此removeClass执行该指令,这并不酷.

出于以下原因,此行为存在问题:

1. 我只安装dragenter及dragleave到<div id="dropzone">,所以我不明白为什么孩子要素附上以及这些事件.

2. 我仍然<div id="dropzone">在徘徊在它的孩子上时拖着元素,所以我不想dragleave开火!

的jsfiddle

这里有一个jsFiddle修补:http …

这些天我们可以将文件拖放到一个特殊的容器中,然后用XHR 2上传它们.有现场进度条等非常酷的东西.这里的例子.

但有时我们不希望那么冷静.我想要的是将文件 - 一次多个 - 拖放到标准的HTML文件输入中:<input type=file multiple>.

那可能吗？有没有办法用文件丢弃中的正确文件名(？)"填充"文件输入？(出于文件系统安全原因,完整文件路径不可用.)

为什么？因为我想提交一份正常的表格.适用于所有浏览器和所有设备.拖放只是渐进式增强,以增强和简化用户体验.标准文件输入(+ multiple属性)的标准表格将在那里.我想添加HTML5增强功能.

编辑
我知道在某些浏览器中,您有时(几乎总是)将文件放入文件输入本身.我知道Chrome通常会这样做,但有时它会失败然后将文件加载到当前页面中(如果您填写表单,则会失败).我想傻瓜和浏览器一样.

我的问题是2倍,我希望WPF提供的解决方案更容易,而不是WinForms的标准解决方案(在我做出澄清之前Christophe Geers提供的解决方案).

首先,有没有一种方法可以在不捕获和处理鼠标点击+拖动事件的情况下使窗口可拖动？我的意思是窗口可以通过标题栏拖动,但如果我设置一个窗口没有一个并且仍然希望能够拖动它,有没有办法只是将事件重新指向任何处理标题栏拖动的处理？

第二,有没有办法将事件处理程序应用于窗口中的所有元素？同样,无论用户点击哪个元素+拖动,都可以使窗口可拖动.显然,没有手动添加处理程序,每个元素.在某个地方做一次吗？

我需要将图像文件放入我的WPF应用程序中.当我放下文件时,我目前有一个事件触发,但我不知道接下来该怎么做.我如何获得图像？为sender对象的图像或控制？

private void ImagePanel_Drop(object sender, DragEventArgs e)
{
    //what next, dont know how to get the image object, can I get the file path here?
}

我正在使用HTML5构建一个拖放到上传的Web应用程序,我正在将文件放到div上,当然还要获取dataTransfer对象,它给了我FileList.

现在我想删除一些文件,但我不知道如何,或者甚至可能.

我最好只想从FileList中删除它们; 我对他们毫无用处.但是如果那是不可能的,那么我是否应该在代码中写入与FileList交互的代码？这似乎很麻烦.

我希望有一个视图,其中有车辆行驶,用户也可以拖放.您认为这样做的最佳大规模战略是什么？是否最好从代表车辆的视图或更大的视图中获取触摸事件？有没有一个简单的范例,你用来拖放你满意吗？不同策略的缺点是什么？