标签: drag-and-drop

这是 如何在画布上放置文本和图像？（火狐41.0.1）

我根本不知道如何访问我放到画布上的图像的图像数据。我尝试过类似的事情data = event.dataTransfer.getData("image")，但这一切都不起作用。

function addDragNDropToCanvas() {
    document.getElementById('canvas').addEventListener("dragover", function(event) { event.preventDefault();}, false);
    //handle the drop
    document.getElementById('canvas').addEventListener("drop", function(event) {
        event.preventDefault();
        console.log('something is dropped on the object with id: ' + event.target.id);
        // var directData=event.dataTransfer.getData("image");
        console.log(event);
        }, false);

 }

掉落事件数据中肯定包含图像数据吗？不是吗？？？（该图像没有自己的 id 属性。）

我有一个 RichTextBox，我希望允许用户将文件从磁盘拖放到其中。文本框中应显示的只是文件名。此代码当前添加"System.String[]"到文本框而不是文件名。当我按照 MSDN 的建议更改为时DataFormats::FileDrop，出现 NULL 取消引用错误。DataFormats::Text

RichTextBox 的名称是rtbFile。在我的构造函数中，我有：

this->rtbFile->AllowDrop = true;

我设置了这样的事件（在InitializeComponents内）：

this->rtbFile->DragEnter += gcnew System::Windows::Forms::DragEventHandler(this, &VanicheMain::rtbFile_DragEnter);
this->rtbFile->DragDrop += gcnew System::Windows::Forms::DragEventHandler(this, &VanicheMain::rtbFile_DragDrop);

函数定义如下：

void rtbFile_DragEnter(System::Object ^sender, System::Windows::Forms::DragEventArgs ^ e) {
    if (e->Data->GetDataPresent(DataFormats::FileDrop))
        e->Effect = DragDropEffects::Copy;
    else
        e->Effect = DragDropEffects::None;
}

System::Void rtbFile_DragDrop(System::Object ^sender, System::Windows::Forms::DragEventArgs ^e){
    int i = rtbFile->SelectionStart;;
    String ^s = rtbFile->Text->Substring(i);
    rtbFile->Text = rtbFile->Text->Substring(0, i);
    String ^str = String::Concat(rtbFile->Text, e->Data->GetData(DataFormats::FileDrop)->ToString());
    rtbFile->Text = String::Concat(str, s);
}

我想检查拖/放到某个区域的内容是否是图像。我的代码可以在 Chrome 和 Firefox 中运行，但不能在 Safari 中运行。我猜这是因为 Safari 没有用于图像的dataTransfer 类型text/html 。Safari 有解决方法吗？

document.addEventListener( 'drop', function( e ) {      
    var contentHtml;        
    if( e.dataTransfer ){           
        contentHtml = (e.originalEvent || e).dataTransfer.getData('text/html');
        if($(contentHtml).is('img')){
            // do some things, then let the standard drop happen
            return true;
        } else {
            // do other things, prevent drop
            return false;
        }
    }
});

我从这个问题知道如何处理拖放

/sf/answers/1251100021/

但我无法检测拖动事件何时开始，因此我可以准备一些资源......

如果我打印这些事件，则首先出现“Drop”，然后出现“Drag”。

如何干净地处理这个问题

我的代码很简单

    private void Label_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
        var lbl = (Label)sender;
        DragDrop.DoDragDrop(lbl, lbl.Content, DragDropEffects.Move);
        Console.WriteLine("Drag...");
    }

    private void Label_Drop(object sender, DragEventArgs e)
    {
        Console.WriteLine("Drop...");
    }

    private void Label_DragEnter(object sender, DragEventArgs e)
    {
        Console.WriteLine("Label_DragEnter...");
    }

    private void Label_DragLeave(object sender, DragEventArgs e)
    {
        Console.WriteLine("Label_DragLeave...");
    }

我现在已经测试了很多东西，我知道这不是最佳的，但我需要从主页拖放到iframe。两者都在同一域中。

我已经使用 iframeFix 进行了测试，但要么我的浏览器（Chrome）不支持它，要么我做错了什么。

http://api.jqueryui.com/draggable/#option-iframeFix

<div id="mycontainer" class="mycontainer">
    <iframe id="iframewindow" src="./child.html" frameborder="0" width="100%" height="100%"></iframe>
</div>

在 iframe 中：

<div id="sortable">
  <div class="portlet">
     some content
  </div>
</div>

（我在 iframe 中使用 jQuery UI 进行排序。）

在主页中加载可拖动的脚本：

$(function() {

   $( ".draggable" ).draggable({
      connectToSortable: "#sortable",
      helper: "clone",
      iframeFix: true,
      helper: function(event) {
            return "<div class='custom-helper'>I move this</div>";

      },
      revert: "invalid",
    });
   $().disableSelection();
)};

我已经测试过制作叠加等，但不知何故我还没有让它工作。

这是一种可以从 html 页面拖放到 iframe 的方法吗？（在所有浏览器中？）

如果另一个解决方案运行良好，我不需要 jQuery UI Draggable。

我使用 QListWidget 通过使用 setItemWidget 设置自定义小部件来显示它们。像这样的东西：

QListWidget* listWidget = new QListWidget;
listWidget->setAcceptDrops(true);
listWidget->setDragDropMode(QAbstractItemView::InternalMove);
listWidget->setDragEnabled(true);
listWidget->setSelectionMode(QAbstractItemView::SingleSelection);

for ( int i = 0 ; i < 50 ; ++i )
{
    ItemWidget* item = new ItemWidget;
    QListWidgetItem* listItem = new QListWidgetItem;
    listItem->setSizeHint(item->sizeHint());
    listWidget->addItem(listItem);
    listWidget->setItemWidget(listItem, item);
}

ItemWidget 源自 QWidget，仅在布局中显示一些自定义数据，如下所示：

ItemWidget::ItemWidget()
{
    QVBoxLayout* layout = new QVBoxLayout;
    layout->setContentsMargins(0, 0, 0, 0);
    layout->setSpacing(0);

    QHBoxLayout* contentLayout = new QHBoxLayout;
    contentLayout->setSizeConstraint(QLayout::SetFixedSize);
    contentLayout->setSpacing(0);

    contentLayout->addSpacing(5);
    contentLayout->setContentsMargins(10, 20, 10, 20);

    QLabel* iconLbl = new QLabel;
    iconLbl->setPixmap(QPixmap(":/icon.png"));
    iconLbl->setMaximumWidth(20);
    contentLayout->addWidget(iconLbl, 0, Qt::AlignTop); …

我有 2 个预制对象，包含在一个带有 UI.Text 的面板中。一个包含用于拖动的类，另一个包含用于放置的类。然而，即使拖动工作正常，OnDrop() 函数也永远不会执行。我还在添加到主 Canvas 的 CanvasGroup 中将 blockRaycasts 设置为 false。

 GetComponentInParent<CanvasGroup>().blocksRaycasts = false;

当我将对象拖入其中时，从接口 UnityEngine.EventSystems.IDropHandler 实现的方法 OnDrop() 可能无法触发，是否有任何原因？

public class ItemDropHandler : MonoBehaviour, IDropHandler
{
    public void OnDrop(PointerEventData eventData)
    {
        Debug.Log("Drop detected over the UI.Text"); //this is never shown
    }
}

有人有任何 C# 代码可以接受从 Outlook 拖放到在.Net Framework 4.5或更高版本下工作的 Winforms 应用程序吗？

我有一些代码已经使用了大约 12 年，其中包括拖放项目的功能，包括来自 Outlook 的电子邮件。

当将目标框架设置为.Net Framework 4进行编译时，代码可以完美运行，但是我一直在开发的一些新功能需要.Net Framework 4.5或更高版本。但是，这会阻止从 Outlook 进行拖放操作。

代码非常复杂，它做了很多与问题无关的事情来确定文件的去向，以及它为谁显示等，所以我不会包括所有这些，但它中断的点很好并且简单的...

public string ImportEmail(DragEventArgs e)
    {
        string strResult = string.Empty;
        var dataObject = new OutlookDataObject(e.Data);
        var filenames = (string[]) dataObject.GetData("FileGroupDescriptor");

在.NET 4下，上面的最后一行按预期返回文件名。

在.NET 4.5 或更高版本中，上面的最后一行返回null。

我在.NET 4.5、4.5.1、4.5.2、4.6、4.6.1、4.6.2和4.7.2（我安装的所有版本）下测试了它，它不适用于其中任何一个。

我已经花了几天时间尝试所有我能找到的拖放代码，但似乎都无法在 .Net 4.5 或更高版本下工作。

下面是我所做的测试表单的完整代码，使用了我从这里和其他地方挖掘的代码。无论您从 Outlook 拖放文件还是电子邮件，此代码都可以在 .Net Framework 4 下完美运行，但在 .Net Framework 4.5 或更高版本下都不起作用（再次测试所有相同版本）。

using System;
using System.IO;
using System.Collections.Generic; …

我想创建一个可以在 React 上拖放列和行的表格。我研究过其他解决方案，例如react-beautiful-dnd、table-dragger等。到目前为止我发现的最好的解决方案是ag Grid，但这需要我获得许可证。我一直在寻找其他解决方案，甚至尝试自己在 React 中构建此功能。有谁了解如何实现此功能，甚至推荐其他可以帮助实现此功能的解决方案。

我找到了一个代码示例，演示了如何使用 panResponder 在 React Native 中进行拖放操作。您可以尝试以下小吃中的代码：

https://snack.expo.io/S14RvxJ_L

我面临的问题是，如果您将项目放在放置区域然后触摸它，则位置会一直重置。

我希望用户能够将项目拖离放置区域而不会出现此问题。再次澄清一下：您将项目拖到放置区域，它将被涂成红色。现在再次拖动该项目并尝试拖动到您想要的任何位置，位置将被重置。我尝试用钩子设置圆圈的初始位置，尝试用起始值设置手势的 y0 和 x0 。到目前为止还没有成功。

到目前为止我发现，我可以在 onPanResponderGrant 中使用 pan.setOffset() 。但由于平底锅是使用 useRef() 创建的，因此它是可变的并且无法更改，或者更好的是我不知道如何更改。

我如何以最好的方式实现这一点？

import React from 'react';
import { StyleSheet, View, Text, Dimensions, Animated, PanResponder } from 'react-native';

export default function Drag() {
  const dropZoneValues = React.useRef(null);
  const pan = React.useRef(new Animated.ValueXY());
  const [bgColor, setBgColor] = React.useState('#2c3e50');

  const isDropZone = React.useCallback((gesture) => {
    const dz = dropZoneValues.current;
    return gesture.moveY > dz.y && gesture.moveY < dz.y + dz.height;
  }, []);

  const onMove = …