标签: drag-and-drop

我想创建一个树状结构,用户可以拖放树叶.我的起点如下:

HTML

<div ng:controller="controller">
  <ul ui-sortable ng-model="items" ui-options="{connectWith: '.item'}" class="item">
    <li ng-repeat="item in items" class="item">
      {{ item.name }}
      <ul ui-sortable ng-model="item.children" ui-options="{connectWith: '.item'}" class="item">
        <li ng-repeat="item in item.children" class="item">{{ item.name }}</li>
      </ul>
    </li>
  </ul>

  <pre>{{ items | json }}</pre>
</div>

<script src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.min.js"></script>

CoffeeScript的

myapp = angular.module 'myapp', ['ui']

myapp.controller 'controller', ($scope) ->

    $scope.items = [
      {id: 1, name: 'Item 1', children: [
        {id: 5, name: 'SubItem 1.1', children: [
          {id: 11, name: 'SubItem 1.1.1', children: []},
          {id: 12, …

Android上拖放的默认行为显然允许将DragShadow拖动到屏幕上的任何位置.

我想限制它可以被拖动的区域 - 要么是指定的边界框,要么限制到特定视图的边界.

我看到我可以使用onInterceptTouchEvent监视拖动位置,但是我没有看到任何修改拖动位置的方法.

有人做过这个吗？

编辑:由于我在这里没有答案,从来没有找到任何其他合适的答案,我编写了自己的实现.它不使用拖放式api,而是模拟它.请参阅https://github.com/rfreedman/android-constrained-drag-and-drop-view

我想学习一个新的技巧,但我并不是100%自信在VBA中有可能,但我想我会在这里与大师核实.

我想要做的是避免使用古老的getopenfilename或浏览器窗口(在我们的网络驱动器上设置起始目录非常困难)并且我想创建一个用户可以拖动的VBA用户表单并从桌面或窗体上的浏览器窗口中删除文件,VBA将加载文件名和路径.同样,我不确定这是否可行,但如果是,或者如果有人在我欣赏指针之前已经完成了.我知道如何设置用户表单,但除此之外我没有任何真正的代码.如果有我能提供的东西,请告诉我.

感谢您的时间和考虑!

我目前正在使用库Draggabilly向我的应用程序添加拖放功能。我想要做的是drop在 CKEditor 的实例上触发事件（HTML5 原生事件），然后执行任务。这是我到目前为止想出来的：

1. CKEditor 只会侦听原生 HTML5 事件，例如dragover 和drop。
2. Dragabilly 不会触发本机drag和drop事件。相反，它使用mousedown和mouseup。

我的问题是，有没有办法使用dispatchEvent或一些类似的方法来模拟dragstart,drag和drop事件？

如果除了我提到的这个问题之外还有更好的解决方案，请告诉我。

谢谢。

我正在尝试将放置事件附加到 HTML div：

document.getElementById('sub-main').addEventListener("drop", 
                                     () => {console.log('DROP')});

但它不火。添加用于测试目的的点击事件有效 - 此点击事件触发：

document.getElementById('sub-main').addEventListener("click", 
                                     () => {console.log('Click')});

我读过从返回 falseondragover会有所帮助：

document.getElementById('sub-main').addEventListener("ondragover", 
                                     () => {return false});

document.getElementById('sub-main').addEventListener("drop", 
                                     () => {console.log('Drop')});

但这也不起作用。我尝试设置draggable为 true：

document.body.setAttribute('draggable', true);

但也没有运气！

将事件侦听器记录到控制台并getEventListeners() 显示所有事件，甚至是我选择的任何随机事件名称：

getEventListeners(document.getElementById('sub-main'));

但是 drop 事件仍然没有触发。有任何想法吗？

我使用 Vuejs 和 DataTransfer 异步上传文件，并且我希望允许拖放多个文件一次上传。

我可以进行第一次上传，但是在上传完成时，Javascript 已经垃圾收集或更改了 DataTransfer 项目对象。

我怎样才能重新设计这个（或克隆事件/DataTransfer 对象），以便在整个 ajax 调用过程中我仍然可以使用数据？

我已经遵循了关于如何使用 DataTransfer 的 MDN 文档，但我很难将它应用于我的特定案例。我也试过复制事件对象，正如你在我的代码中看到的那样，但它显然没有做深复制，只是传递了引用，这没有帮助。

    methods: {
        dropHandler: function (event) {
            if (event.dataTransfer.items) {
                let i = 0;
                let self = this;
                let ev = event;

                function uploadHandler() {
                    let items = ev.dataTransfer.items;
                    let len = items.length;

                    // len NOW EQUALS 4

                    console.log("LEN: ", len);
                    if (items[i].kind === 'file') {
                        var file = items[i].getAsFile();
                        $('#id_file_name').val(file.name);
                        var file_form = $('#fileform2').get(0);
                        var form_data = new FormData(file_form); 

                        if (form_data) { …

我有一个小的 WPF 应用程序，它有一个带有图像控件的窗口。图像控件显示来自文件系统的图像。我希望用户能够将图像拖放到桌面或任何地方进行保存。它工作正常。

但是我想在用户拖动鼠标光标时显示小图像缩略图。就像我们将图像从 Windows 文件资源管理器拖到其他地方一样。如何实现？

当前拖放行为

期望的行为

这是我的 XAML 代码

<Grid>
   <Image x:Name="img" Height="100" Width="100" Margin="100,30,0,0"/>
</Grid>

这是 C# 代码

   public partial class MainWindow : Window
    {
        string imgPath;
        Point start;
        bool dragStart = false;

        public MainWindow()
        {
            InitializeComponent();
            imgPath = "C:\\Pictures\\flower.jpg";

            ImageSource imageSource = new BitmapImage(new Uri(imgPath));
            img.Source = imageSource;
            window.PreviewMouseMove += Window_PreviewMouseMove;
            window.PreviewMouseUp += Window_PreviewMouseUp;
            window.Closing += Window_Closing;
            img.PreviewMouseLeftButtonDown += Img_PreviewMouseLeftButtonDown;
        }

        private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)
        {
            window.PreviewMouseMove -= Window_PreviewMouseMove;
            window.PreviewMouseUp -= Window_PreviewMouseUp;
            window.Closing -= …

我正在尝试为我的反应项目构建一个拖放列表。我正在使用react-beautiful-dnd 库。但我面临这个错误：

错误：不变失败：找不到所需的上下文

我发现是可拖动组件引发了此错误

<Draggable draggableId={props.id} index={props.index}>
{(provided, snapshot) => (
<div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
   Some code goes in here....
</div>
)}

<Draggable/>

然后我发现了这个github问题：https://github.com/atlassian/react-beautiful-dnd/issues/948 根据这里建议的解决方案，我添加了一个样式函数

const getStyle = (style, snapshot, backgroundColor) => {
    return {
      ...style,
      borderBottomColor: backgroundColor,
      backgroundColor: `${backgroundColor}`,
    };
  };

然后将样式添加到div中

<Draggable draggableId={props.id} index={props.index}>
{(provided, snapshot) => (
<div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} style= 
{getStyle(provided.draggableProps.style, snapshot)>
   Some code goes in here....
</div>
)}
<Draggable/>

但我仍然无法解决这个问题...我能做些什么来解决这个问题？

我正在与 Cypress 进行斗争，以实现基于反应的网站上的任何拖放操作。Cypress 仪表板中的操作不会失败，但项目根本不会被拖动。

我拥有的是一组 div，它们是“在菜单中”的页面列表（因此它们对用户可见），另一组 div 是“不在菜单中”（因此它们对用户不可见） ）。我想要做的是将“不在菜单中”页面移至“在菜单中”部分。

这些是网站中的元素：

“可拖动”项目：

<div data-testid='pages-section-not-in-menu-list' data-rbd-droppable-id="notInMenu" data-rbd-droppable-context-id="0" class="draggable-place">
    <div class="page1">Page1</div>
    <div class="page2">Page2</div>
    <div class="page3">Page3</div>
</div>

“可放置”区域：

<div data-testid='pages-section-in-menu-list' data-rbd-droppable-id="inMenu" data-rbd-droppable-context-id="0" class="droppable-place">
</div>

我的代码：

public dragAndDropPagesToInMenu(): void {

        const dataTransfer = new DataTransfer();
        cy.wait(3000);
        cy.log("Dragging one page to `In Menu` section");
        cy.get("div[class='page3']")
            .first()
            .trigger('dragstart', { dataTransfer });
        cy.get("div[data-testid='pages-section-in-menu-list']")
            .eq(0)
            .trigger('drop', { dataTransfer });
        cy.get("div[class='page3']")
            .last()
            .trigger('dragend');

    }

我还尝试了以下解决方案，但到目前为止没有一个有效：

• 如何在cypress测试中实现拖放？
• https://applitools.com/event/drag-and-drop-in-cypress/
• https://docs.cypress.io/api/commands/trigger#Arguments

有任何想法吗？

我想dragend以不同的方式处理事件，具体取决于元素是否刚刚被拖动到浏览器窗口（或站点对应）内部或外部（例如外部文件管理器）。

在我没有找到实例的任何属性DragEvent来指示它是在站点上下文内部还是外部之后，我开始通过算术计算出相应的鼠标事件是否仍然发生在站点的几何结构内部。

最终我可能会成功使用这种方法（目前还没有工作），但它有一个主要缺点（先不说它的丑陋）：放置目标窗口可能位于浏览器的顶部，因此几何图形根本不是真正的指示器。

那么..我如何找出dragend（或我可以用来存储某些状态的任何其他事件）是否指向浏览器窗口（或源站点）之外？