标签: drag-and-drop

是否可以使用Raphael js拖放页面周围的对象而不仅仅是圆形和矩形？

我想添加路径和图像,然后你可以移动,但它证明是棘手的.我想与Raphael合作,因为它支持触摸界面.

这是代码

<script>
    window.onload = function () {
        var R = Raphael(0, 0, "100%", "100%"),
            r = R.circle(100, 100, 50).attr({fill: "hsb(0, 1, 1)", stroke: "none", opacity: .5}),
            g = R.circle(210, 100, 50).attr({fill: "hsb(.3, 1, 1)", stroke: "none", opacity: .5}),
            b = R.circle(320, 100, 50).attr({fill: "hsb(.6, 1, 1)", stroke: "#fff", "fill-opacity": 0, "stroke-width": 0.8, opacity: .5}),
            p = R.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 …

我已经成功实现了本机HTML5 Drag and Drop,用于在页面内移动HTML元素(只是说,从一个地方到另一个地方的div,与任何与主机操作系统文件交互无关).这在PC上的Chrome和Safari中运行良好但我无法在iPad的Safari中启动拖动操作.

到目前为止我发现了这个:

使用JavaScript拖放

Safari,Dashboard和基于WebKit的应用程序支持自定义HTML页面中拖放操作的行为.

注意:此技术仅在桌面版Safari上受支持.对于iPhone OS,请使用DOM Touch,如处理事件(Safari Web内容指南的一部分)和Safari DOM Additions Reference中所述.

在这里.但它已经过时了(2009-06-08).

Doe有谁知道在Mobile Safari中是否可以使用原生 HTML5？(我不希望javascript框架像jQuery UI这样的解决方案).

谢谢!

我正在尝试开发自定义启动器应用程序(具有无限数量的主页),我需要在Launcher2(android 4.2)中实现拖放.

所以我发现了两种方法

1)拖放框架
为解释2)使用Android的launcher2方式一样实现的DragController,DragSource上这里.

但我很难理解为什么Android家伙没有在他们自己的应用程序中使用他们开发的拖放框架.任何人都可以简要介绍他们的方法背后可能的理由吗？(我的意思是在记忆/表现方面)

提前致谢.

我正在尝试拖放我的树视图中的文件,但我不知道为什么它会崩溃,如果我运行它并尝试拖动文件.

下面的代码是我尝试过的.请帮忙.

private void TreeViewItem_Drop( object sender, DragEventArgs e)
{
    TreeViewItem treeViewItem = e.Source as TreeViewItem;
    TreeViewItem obj = e.Data.GetData(typeof(TreeViewItem)) as TreeViewItem;

    if ((obj.Parent as TreeViewItem) != null)
    {
        (obj.Parent as TreeViewItem).Items.Remove(obj);
    }
    else
    {
        treeViewItem.Items.Remove(obj);
        treeViewItem.Items.Insert(0, obj);
        e.Handled = true;
    }
}

private void TreeViewItem_MouseLeftButtonDown( object sender,MouseButtonEventArgs e)
{
    DependencyObject dependencyObject = _treeview.InputHitTest(e.GetPosition(_treeview)) as DependencyObject;

    Debug.Write(e.Source.GetType().ToString());

    if (dependencyObject is TextBlock)
    {
        TreeViewItem treeviewItem = e.Source as TreeViewItem;

        DragDrop.DoDragDrop(_treeview, _treeview.SelectedValue, DragDropEffects.Move);
        e.Handled = true;
    }
}

我知道在这个问题上有很多答案,但我仍然无法让它工作.我已经在应用程序的每个级别的每个控件上启用了AllowDrop,并尝试捕获每个控件上的DragEnter和Drop无效.我可以在应用程序中拖放项目,但是每当我尝试从Windows资源管理器或桌面等中提取内容时,它都会给我"无"图标.我有什么想法可能做错了吗？

这是我正在做的一个例子.仍然没有显示移动光标,也不会点击MainWindow_DragEnter函数.

    namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.AllowDrop = true;
            this.DragEnter += new DragEventHandler(MainWindow_DragEnter);
        }

        void MainWindow_DragEnter(object sender, DragEventArgs e)
        {
            e.Effects = DragDropEffects.Move;
        }
    }
}

我想知道是否有任何方法可以使Dropzone.js(http://dropzonejs.com)使用标准浏览器POST而不是AJAX.

在提交之前可能会在DOM中注入输入type = file的某种方法吗？

参考这个答案:https://stackoverflow.com/a/6362527/3034646

我如何绑定触摸事件,以便他们执行dragstart和drop事件？我已经尝试将dragstart绑定到touchdown并放到touchup但这会导致dragstart没有在dataTransfer.get/setData上获取.

是否可以映射触摸事件以复制dragstart和drop？

我有两个连接的ui可排序列表.当其中一个列表为空时,我需要显示一条消息; 当拖动时悬停该空列表时,我需要显示一个样式化的放置目标并隐藏空列表消息.我能够编写绝大多数代码,这里有一个简化的Codepen工作.

问题在于,当您从填充列表中拖动空列表然后再次移出时,空列表会显示空列表占位符和样式化放置目标.这是一个截屏:

问题的根源似乎在于我计算sortableList指令的列表是否为空:

scope.isEmpty = function() {
  if (!scope.attachments) {
    return true;
  } else if (scope.dragDirection === 'drag-out' && !scope.hovered) {             
    return scope.attachments.length <= 1;
  } else if (scope.hovered) {
    return false;
  } else {
    return scope.attachments.length === 0;
  }
};

请注意,我正在跟踪范围上的状态并使用$ apply来确保DOM更新如下:

function onDragStart() {
  scope.$apply(function() {
    scope.dragDirection = 'drag-out';
  });
}

function onDragStop() {
   scope.$apply(function() {
    scope.dragDirection = '';
  });
}

function onDragOver() {
  scope.$apply(function() {
    scope.hovered = true;
  });
}

function onDragOut() {
  scope.$apply(function() { …

我有一个HTML页面,其中包含一些可拖动的元素.我们的规格说,将光标悬停在这样的元素上必须是光标grab 和拖动光标时必须是grabbing .

我知道这是可以设置dropEffect哪些改变光标外观上面放置区域,但也有很少的选择:copy,move,link,和none-没有定制或相似.

我试图用Javascript和CSS更改光标,比如设置cursor: grabbing;何时ondragstart触发.但是在拖放区拖动时会出现浏览器默认移动光标.

所以问题是:我缺少什么来显示抓取光标(在拖动期间？

不幸的是,我不能在解决方案中使用JQuery或其他帮助库.提前致谢!

var onDragStart = function(event) {
    event.dataTransfer.setData("Text", event.target.id);
    event.currentTarget.classList.add("being-dragged");
};

var onDragEnd = function(event) {
    event.currentTarget.classList.remove("being-dragged");
};

var onDragOver = function(event) {
    event.preventDefault();
};

.dropzone {
    width: 500px;
    height: 200px;
    background-color: silver;
}

.block {
    position: absolute;
    background-color: pink;
    margin: 10px;
    border: 20px solid pink;
}

.draggable {
    cursor: …

在Visual Studio代码中,从资源管理器窗格中,如何从我的images文件夹中拖动PNG文件并将其放在markdown文件中,以便VS Code将路径插入到已删除的图像中？

目前,VS Code只是在新选项卡中打开图像.

我已经回顾了建议的答案,以及可用的降价扩展,没有找到答案的运气.

任何帮助表示赞赏!