标签: drag-and-drop

我正在寻找一种方法来通过拖放重新排序WPF WrapPanel的内容(项目).我只想点击一个项目并将其拖动到一个新位置.

根据我的理解,这是一个非常常见的任务,我想我有人已经这样做了,或者知道如何实现这个功能.

我已经进行了谷歌搜索,但一无所获.也许这比我想象的要困难.

我一直在寻找互联网的高低,但找不到一些可以帮助我的例子.

我正在用wpf开发一个应用程序,在其中我用了一个DataGrid; 每个细胞都有一个DataTemplate带有图像的马赛克风格; 在网格的一侧,我有一些瓷砖在网格上使用.

我能够拖动瓷砖但不能将它们放在网格上,因为我找不到制作掉落的单元格.有没有办法从拖拽事件中获取单元格位置？

谢谢

我想通过O.Reilly-Swing.Hacks Hack 69的预览实现一个简单的JComponent-Drag-and-Drop .半透明的拖放.我的问题是如果TransferHandler启动拖动MouseMotionListener停止执行mouseDragged().

这是一个小示例代码:

一个带绿色和红色边的小窗户.绿色侧不会启动拖动,始终执行mouseDragged()但不会达到exportDone().

红色Side通过exportAsDrag()启动Drag,但之后mouseDragged()将不再起作用.

public class Drag extends JPanel implements Transferable, MouseMotionListener, MouseListener {
public Drag() {
    this.setTransferHandler( new TransferHandler() {
        @Override
        protected Transferable createTransferable( JComponent c ) {
            return (Drag)c;
        }
        @Override
        public boolean canImport( JComponent comp, DataFlavor[] transferFlavors ) {
            return false;
        }
        @Override
        public int getSourceActions( JComponent c ) {
            return MOVE;
        }
        @Override
        protected void exportDone( JComponent source, Transferable data, int action ) {
            super.exportDone( source, data, action );
            System.out.println( "done" …

我一直在尝试制作一个javascript来获取div元素的X和Y坐标.经过一些尝试后我得到了一些数字,但我不知道如何验证它们的确切位置(脚本将X返回168,Y返回258)我正在运行屏幕分辨率为1280的脚本x 800.这是我用来获得此结果的脚本:

function get_x(div) {
    var getY;
    var element = document.getElementById("" + div).offsetHeight;
    var get_center_screen = screen.width / 2;

    document.getElementById("span_x").innerHTML = element;
    return getX;
}

function get_y(div) {
    var getY;
    var element = document.getElementById("" + div).offsetWidth;
    var get_center_screen = screen.height / 2;

    document.getElementById("span_y").innerHTML = element;
    return getY;
}?

现在的问题是.假设这些是函数返回的精确坐标是否合理,或者是否容易在该位置产生一些东西以确定它究竟是什么？

最后,我将如何使这个div元素移动？我知道我应该使用一个mousedown事件处理程序和一段时间来继续移动元素但是任何提示/提示都非常感谢我最关心的是如何在循环运行时获得它.

好吧,伙计们,我一直在为这个问题疯狂地挠头,并花了几个小时试图研究它是如何工作的但是我还没有找到答案,如果你希望看到我的任何一个SRC可以随意询问我和我会看看能不能帮忙.

基本上我遇到的问题是TreeView我的应用程序中有一个文件夹,即:

Catalog

  Brands
    Nike
    Adidas
    Lactose

  Styles
    Sandles
    Trainers
    Boots

我试图解决的问题是,当我拖动文件夹时(这是在我DragDropManager班级中处理的),我无法向上或向下滚动(只显示一个可爱的停止标志).我也无法在树视图中找到一个滚动条,所以我不确定它是如何生成的(这不是我自己的软件,我最近开始为一家公司工作所以我不熟悉代码而没有其他人似乎知道.)

如果我想从顶部移动到最底部,这是一个问题.

滚动工作正常,无需拖动.

如果有人希望看到我的代码的任何部分随意问,因为我不确定实际向你们展示什么.

我已经阅读了很多文章,我只是在摸不着头脑.

我无法使用NodeJS获取文件上传.我正在使用Dropzone.JS创建一个表单,在此处向/ file-upload发送POST请求:

<form action="/file-upload" class="dropzone dragndrop" id="my-awesome-dropzone"></form> 

然后我在app.js中有一条路线:

app.post('/file-upload', routes.upload);

那我的经纪人:

exports.upload = function(req, res){
     console.log(req.files);
     res.send("OK");
}

但是,此处的上传功能永远不会被调用.服务器首先崩溃并出现此错误:

events.js:69
        throw arguments[1]; // Unhandled 'error' event
                       ^
Error: Invalid data
    at WriteStream._write (fs.js:1616:31)
    at onwrite (_stream_writable.js:265:14)
    at WritableState.onwrite (_stream_writable.js:94:5)
    at fs.js:1628:5
    at Object.wrapper [as oncomplete] (fs.js:475:5)
    at process._makeCallback (node.js:321:24)

所以我不确定我该怎么办,因为看来这不是我的错.我遵循其他教程,没有看错.此外,当我在chrome dev工具下检查我的网络时,它显示:

Request URL:http://localhost:3000/file-upload
**Request Headers**
Accept:application/json
Cache-Control:no-cache
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryMmLSkbfQskfIcjfE
Origin:http://localhost:3000
Pragma:no-cache
Referer:http://localhost:3000/
User-Agent:Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17
X-File-Name:Screenshot from 2013-03-20 12:23:42.png
X-Requested-With:XMLHttpRequest
**Request Payload**
------WebKitFormBoundaryMmLSkbfQskfIcjfE …

是否可以仅使用javascript模拟/伪造掉落事件？如何测试此类事件？

以这个dnd上传样本页为例,是否可以使用文件触发"drop"事件而不实际丢弃文件？我们说点击一个按钮？

我已经开始编写一个可以控制鼠标并完成技巧的Sukuli脚本,但我正在寻找更好的解决方案.

编辑

@kol答案是摆脱拖放事件的好方法,但我仍然需要从我的电脑中手动选择一个文件.这是我对模拟感兴趣的一点.有没有办法以编程方式创建文件变量？

var fileInput = document.getElementById('fileInput'),
file = fileInput.files[0];    

我在Chrome中遇到了非常令人沮丧和意想不到的拖放行为.

问题:

该:hover伪类被触发,并停留在周围的元素,特别是那些在DragElement的幽灵将其覆盖.

重现问题的步骤:

• 示例: http ://plnkr.co/edit/PayXodHUtxqUZsM3T2ye 然后在单独窗口中预览
• 单击并拖动任何数字框.
• 放下任何其他盒子,它的鬼魂略微重叠周围的元素.

这种情况发生在Chrome 35,36和38-beta中.我还注意到,在使用编辑器的Plunker的Run框架中没有发生这种情况,但是在完整的窗口视图中发生(在上面链接).它也发生在我的node-webkit应用程序中(我发现了这个问题).

到目前为止我尝试过的:

• 使用-webkit-user-drag: element;上.box
• draggable="true"在每个.box元素上添加属性以查看是否存在差异.
• event.stopPropagation 关于各种要素,包括 window

为什么它会触发:hover周围的元素？这绝对没有意义.我要撕掉我的头发了!:/

提前感谢愿意帮助我解决此问题的任何人.

我使用的是Python 2.7和Selenium 2.44.

我想在Selenium WD中自动执行拖放操作,但根据其他相关帖子,Selenium尚不支持HTML5中的操作.有没有办法在Python中模拟拖放？

这是我试过的代码:

driver = webdriver.Firefox()
driver.get("http://html5demos.com/drag")
target = driver.find_element_by_id("one")
source = driver.find_element_by_id("bin")
actionChains = ActionChains(driver)
actionChains.drag_and_drop(target, source).perform()

它不起作用.

<div
                      cdkDropList
                      #girlList="cdkDropList"
                      [cdkDropListData]="girls"
                      [cdkDropListConnectedTo]="[convaList]"
                      class="example-list"
                      (cdkDropListDropped)="drop($event)"><div class="card color-challenging mb-2" *ngFor="let girls_data of girls" cdkDrag>
                      <div class="card-body p-2 justify-content-between align-items-center d-flex">
                        <span class="reading-grade font-weight-bold">{{girls_data.id}}</span>
                        <div class="student-grade flex flex-grow-1">
                          <p class="justify-content-between align-items-center d-flex">
                            <span class="student-name">{{girls_data.firstName}}{{girls_data.lastName}}</span>
                            <span>{{girls_data.gender}}</span>
                          </p>
                          <p class="justify-content-between align-items-center d-flex">
                            <span>{{girls_data.currentAcademicYear}}</span>
                            <span><i class="fa fa-ban" aria-hidden="true"></i> <i class="fa fa-paperclip" aria-hidden="true"></i></span>
                          </p>
                        </div>
                        <span class="behavior-grade text-right font-weight-bold">{{girls_data.inGrade}}</span>
                      </div>
                    </div>

当使用 [cdkDropListData] 时，控制台上出现错误，无法绑定到“cdkDropListData”，因为它不是“div”的已知属性。

我是角度新手，所以请避免新手行为

我已经在 module.ts 中导入了 CdkDragDrop

这是组件文件。

import {Component, NgModule} from '@angular/core';
import {StudentModel} from '../model/studentRepository.model';
import {Student} from '../model/student.model';
import …