标签: drag-and-drop

这是一个特定问题,所以我会说得对.

我正在为一个Web应用程序的一部分做一个简短而简单的拖放例程,虽然拖放位工作正常,但在操作过程中该网站变得非常丑陋,因为浏览器仍然执行默认操作并且工作正常关于文本选择.

我尝试了一些主要涉及从mousedown或click事件中返回false的解决方案,虽然它们在某些浏览器中禁用了文本选择,但它们似乎也完全禁用了mouseup事件,破坏了脚本的"drop"位并留下了这个鼠标悬浮在鼠标周围 - 不好玩.

我真的不希望文本选择完全消失,我只是想建议浏览器......拖动时不要这样做,如果这有意义的话.由于我知道受影响的区域(涉及iframe),我可以轻松地将属性应用于受影响的元素等.如果需要,我可以发布代码,但我正在寻找更多的通用解决方案.由于这只是一个美学的东西,我正在寻找适用于大多数浏览器的修复程序,它并不是那么重要.

谢谢!

试图为iPhone应用程序发生一些基本的拖放功能.

我目前尝试执行此操作的代码如下:

- (void) touchesMoved:(NSSet*)touches withEvent:(UIEvent*)event
{
    UITouch *touch = [touches anyObject];

    CGPoint location = [touch locationInView:self];
    self.center = location;
}

此代码具有触摸的UIView闪烁的结果,同时它跟随触摸.稍微玩了一下之后,我也注意到UIView似乎从屏幕上的0,0位置闪烁到当前触摸的位置.

我有什么想法我做错了吗？

我创建了一个小型Windows窗体测试应用程序来尝试一些拖放代码.该表单由三个PictureBoxes组成.我的目的是从一个PictureBox中抓取一张图片,在拖动操作期间将其显示为自定义光标,然后将其放在另一个PictureBox目标上.

只要它们在同一个表单上,这从一个PictureBox到另一个PictureBox就可以正常工作.

如果我打开同一个应用程序的两个实例并尝试在它们之间拖放,我会收到以下神秘错误:

此远程处理代理没有通道接收器,这意味着服务器没有正在侦听的已注册服务器通道,或者此应用程序没有合适的客户端通道与服务器通信.

但是,出于某种原因,它可以拖放到Wordpad(但不是MS Word或画笔).

三个PictureBoxes将它们的事件连接起来如下:

foreach (Control pbx in this.Controls) {
    if (pbx is PictureBox) {
        pbx.AllowDrop = true;
        pbx.MouseDown    += new MouseEventHandler(pictureBox_MouseDown);
        pbx.GiveFeedback += new GiveFeedbackEventHandler(pictureBox_GiveFeedback);
        pbx.DragEnter    += new DragEventHandler(pictureBox_DragEnter);
        pbx.DragDrop     += new DragEventHandler(pictureBox_DragDrop);
    }
}

然后是这样的四个事件:

void pictureBox_MouseDown(object sender, MouseEventArgs e) {
    int width = (sender as PictureBox).Image.Width;
    int height = (sender as PictureBox).Image.Height;

    Bitmap bmp = new Bitmap(width, height);
    Graphics g = Graphics.FromImage(bmp);
    g.DrawImage((sender as PictureBox).Image, 0, 0, width, height);
    g.Dispose();
    cursorCreatedFromControlBitmap = CustomCursors.CreateFormCursor(bmp, …

WPF DragDrop.DoDragDrop方法DragSource作为其第一个参数.

有没有办法可以DragSource在OnDrop其他拖放事件中获取此对象？

我有一个使用JQuery UI的页面; 特别是可排序的交互.

该页面适用于带有鼠标的桌面Web浏览器,但是我无法在iPhone上的Mobile Safari上使用拖放功能.任何拖动操作都只是滚动页面.

我页面上的功能与JQuery UI站点上的Sortable Empty-Lists演示非常相似.此页面也无法在iPhone上运行.

有没有办法让拖放功能在iPhone上运行？

我需要"可排序的拖放"功能,我正在使用jQuery.我不能真正使用jQuery UI,因为对于这个项目来说,这将是一个开销(我需要添加许多KB的JS和CSS才能使用一小部分功能).

是否有任何你可以推荐的插件,或者是一个简单的实现路径,我可以遵循？

解决方案必须尽可能轻量级,最好基于jQuery/Sizzle或纯JavaScript.

我经常搜索一下jQuery的拖放教程(没有UI),但由于JQuery UI的普及,所有的拖放功能都基于JQuery UI.

任何人都可以给我一个提示如何通过JQuery独立进行基本的拖放操作？

我刚刚发现当使用HTML5拖放时 - 尝试使用鼠标滚轮或鼠标垫滚动页面将无法工作,并且没有调用事件onmousewheel的监听器.

作为一个例子,请看这里:http: //jsfiddle.net/92u6K/2/

jQuery的

 var $dragging = null;
    $('.item').bind('dragstart', function(e) {
        $dragging = $(e.currentTarget)
    });

    $('.item').bind('dragover', function(e) {
        e.preventDefault();
        e.stopPropagation();
    });

    $('.item').bind('drop', function(e) {
        e.preventDefault();
        e.stopPropagation();

        $dragging.unbind();
        $dragging.insertBefore($(e.currentTarget));
    });

(该示例显示了带滚动条的20个div,因此您可以尝试拖动项目并尝试同时滚动屏幕)

我发现FireFox已经有几年的bug了:https: //bugzilla.mozilla.org/show_bug.cgi？id = 41708

有人创建了一个扩展来支持这种行为:https: //addons.mozilla.org/en-US/firefox/addon/drag-to-scroll-reloaded/

我在Chrome中找不到任何类似的错误.是否有适用于Chrome的解决方案？

编辑:这在Safari中有效,因此Chrome和Firefox中存在这种行为.

我只是尝试将HTML5 draggable ='false'属性应用于某些图像,但它在Firefox浏览器中不起作用.在Chrome中工作正常但在Firefox上,选择了能够拖放的图像.示例代码可以在这里看到:

<div id="dnd">
    <textarea placeholder="drop here"></textarea>
    <img src="http://johnlewis.scene7.com/is/image/JohnLewis/231108668?$prod_main$" draggable='false'/>
</div>

的jsfiddle

我有Firefox最新版本:32.0.3

谷歌很多,但没有找到更好的解决方案.有没有使用JavaScript的解决方案？任何帮助,将不胜感激.

谢谢

我正在尝试显示ghost元素而不是拖放的默认浏览器预览.问题是在拖动时不显示ghost元素内的ghost元素.但是,如果我放下它,再次拖动图像就会显示出来.

所以我认为这可能是某种与缓存相关的问题.但在这种情况下,我无法看到如何预先缓存图像.

这是代码:

// HTML:

<div class="parent container">
<img class="element" src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg" draggable="true" />
</div>

// JS:

document.querySelector(".element").addEventListener("dragstart", function(e) {
    var img = document.createElement("img");
    var div = document.createElement('div');
    div.style.width = '100px';
    div.style.height = '100px';
    div.style.position = 'fixed';
    div.style.top = '-1000000px';
    div.style.left = '-1000000px';
    div.style.border = '2px solid red';

    img.src = "http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg";
    img.style.width = '100px';
    img.style.height = '100px';
    div.appendChild(img);
    document.body.appendChild(div);
    e.dataTransfer.setData('text/plain', 'test');
    e.dataTransfer.setDragImage(div, 0, 0);
}, false);

小提琴:https: //jsfiddle.net/etseq5cg/5/

重现步骤:

1)打开小提琴/运行片段

2)尝试拖动样本图像

实际:你会看到一个带红色边框的空方块

预期:里面有图像的方形.

要再次重现它,您需要强制重新加载页面(ctrl + f5).这就是为什么我认为这是缓存相关的问题.

注意:我知道我应该在dragend处理程序中从DOM中删除ghost元素,但这在这里并不重要. …