标签: drag-and-drop

我在div中有很多元素(浮动href标签),设置高度/宽度,overflow: auto在CSS中设置滚动.

这是div的结构:

<div id="tagFun_div_main">
<div id="tf_div_tagsReturn">
    <!-- all the draggable elements go in here, the parent div scolls -->
</div>
<div id=" tf_div_tagsDrop">
    <div id="tf_dropBox"></div>
</div></div>

父div,'tf_div_tagsReturn'和'tf_div_tagsDrop'最终会相互浮动.

这是在使用类名'tag_cell'创建所有'draggable'元素之后运行的jQuery,:

$(function() {
    $(".tag_cell").draggable({ 
        revert: 'invalid', 
        scroll: false,
        containment: '#tagFun_div_main'
    });
    $("#tf_dropBox").droppable({
        accept: '.tag_cell',
        hoverClass: 'tf_dropBox_hover',
        activeClass: 'tf_dropBox_active',
        drop: function(event, ui) {
            GLOBAL_ary_tf_tags.push(ui.draggable.html());
            tagFun_reload();
        }
    });
}); 

如上所述,可拖动元素在div'tf_div_tagsReturn'中可拖动,但它们不会在视觉上拖动到父div之外.值得注意的是,如果我拖动其中一个可拖动的元素,并将鼠标移动到droppable div上,并且id为'tf_dropBox',那么hoverclass会被触发,我再也看不到可拖动的元素了.

这是我第一次使用jQuery,所以希望我只是缺少一些非常明显的东西.我一直在阅读文档和搜索论坛到目前为止没有占上风:(

更新:

非常感谢Jabes88提供的解决方案,使我能够实现我想要的功能.这是我的jQuery最终看起来像:

$(function() {
    $(".tag_cell").draggable({ 
        revert: 'invalid', 
        scroll: false,
        containment: '#tagFun_div_main',
        helper: 'clone',
        start : function() {
        this.style.display="none";
        },
        stop: …

我们在Visual Studio解决方案中有一些安装项目(其他项目类型 - >安装和部署 - >安装项目).这个项目有另一个库类型项目,其安装类名为InstallationCore,类似于项目输出.在用户操作中,我调用InstallationCore安装程序的安装和卸载功能.

InstallationCore具有用于与用户交互的窗体表单.在表单中,我使用拖放功能将树视图中的拖放文本拖放到文本框.
但是符合:

txbUserName.AllowDrop = true;

我得到JIT调试器的错误:

未处理的异常已经发生
DragDrop注册没有成功
System.InvalidOperationException:DragDrop注册没有成功

然后是长堆栈跟踪.
重要的是,当我从测试项目运行安装程序功能时,错误没有发生,一切正常.仅当我运行.msi包时才会出现错误.

有什么建议？

我正在使用带有C#的.Net 3.5 Sp1编写的WPF编写的Windows客户端,其中要求客户端收到的电子邮件中的数据可以存储在数据库中.现在,处理此问题的最简单方法是使用诱导关节炎的量ctrl-c/ctrl-v复制并粘贴手动接收的文本,主题,联系信息和时间.

我认为处理这种情况的一种简单方法是允许用户将一个或多个电子邮件从Outlook(它们都使用当前的Outlook 2007)拖到窗口中,允许我的应用程序提取必要的信息并将其发送到后端存储系统.

然而,几个小时的谷歌搜索信息似乎表明这个看似基本的任务令人震惊的缺乏信息.我认为这样的东西在许多不同的设置中会有用,但到目前为止我能找到的所有东西都是半生不熟的非解决方案.

有没有人对如何做到这一点有任何建议？因为我只是要阅读邮件而不是发送任何内容或做任何有害的事情,所以对于一个不涉及讨厌的安全弹出窗口的解决方案来说会很好,但是任何事情都无法完成.

基本上,如果我可以获得所有选中的邮件列表,从Outlook中拖放,我将能够自己处理其余的邮件!

谢谢!

符文

我有一些非常长的可拖动元素,我可以放在背景表的所有单元格中.

当我开始拖动这种元素悬停我的droppable容器(我的表的单元格)时,知道元素将被丢弃的"热点"是它自身的中间部分.

不幸的是,我的元素中间通常是不可见的,将元素放在正确的位置是没有用的.

是否可以指定光标位置来选择元素将放在哪个容器中而不是元素的中间？

我真的被困住了,我真的很感激任何帮助.

嗨,这是一个描述我的问题的示例代码.黄色div不能轻易落入细胞,因为它太长了.jsbin.com/upunek/edit

谢谢

我可以请一个HTML5文件拖放实现的好例子吗？如果从外部应用程序(Windows资源管理器)到浏览器窗口执行拖放操作,源代码应该有效.它应该在尽可能多的浏览器上工作.

我想问一个有很好解释的示例代码.我不想使用第三方库,因为我需要根据我的需要修改代码.代码应基于HTML5和JavaScript.我不想使用JQuery.

我花了一整天寻找好的材料来源,但令人惊讶的是,我没有找到任何好的东西.我发现的示例适用于Mozilla,但不适用于Chrome.

我无法使用D3.js v3 成功区分绑定到两者的元素上的click事件和drag事件.下面代码中的圆圈被赋予拖动行为和click侦听器. 在这里演示

var dragGroup = d3.behavior.drag()
    .on('dragstart', function () {
    console.log('Start Dragging Group');
})
    .on('drag', function (d, i) {
    d.x += d3.event.dx;
    d.y += d3.event.dy;
    d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
});

var dragCircle = d3.behavior.drag()
    .on('dragstart', function () {
    d3.event.sourceEvent.stopPropagation();
    d3.event.sourceEvent.preventDefault();
    console.log('Start Dragging Circle');
})
    .on('drag', function (d, i) {
    d.cx += d3.event.dx;
    d.cy += d3.event.dy;
    d3.select(this).attr('cx', d.cx).attr('cy', d.cy);
});

var svg = d3.select('body').append('svg').attr('viewBox', '-50 -50 300 …

我正在构建一个Web应用程序,它使用类似的拖放隐喻,trello通过将卡片从一个列表拖放到另一个列表来移动卡片.

我怎样才能做到这一点？

如何设置JTable以便能够将行拖动到表中的不同索引.例如,如果我有5行,我想将第4行拖到第2位？

我正在听这个drop事件并且正在e.preventDefault()尝试打开已删除的文件.它一直工作到昨天.但就在今天它因某些未知原因而破产.我做了一个JsFiddle#bwquR/10反映相同的.

编辑:

看起来如果你不采取dragover事件drop无法处理.即使在小提琴中如果你评论dragover它也行不通.
在实际工作中我错过了拼写dragover但是它仍然是一个问题,drop如果没有dragover

小提琴实际上是工作但是身体很小(只有DROP那里的文字).它drop只是在DROP文字不在整个身体上的那个小区域上进行.所以我觉得它不起作用.对困惑感到抱歉.

我实际上有两个问题,标题中的主要是主要问题.我在页面上有多个div元素标记为droppable.在这些div元素中,我有标记为可拖动的跨度.我想要它,所以当你拖动一个元素时,它会悬停在一个可放置的区域上,该区域要么突出显示,要么有边框,这样他们就知道可以将它放在那里.

作为次要问题,我的所有可拖动元素都有一个显示:块,宽度和浮动,所以它们在我的可放置区域看起来很漂亮.当物品掉落时,他们似乎得到了一个位置设置,因为它们不再像我的其他物品一样漂亮漂亮.供参考,这是我的javascript.

$('.drag_span').draggable({
    revert: true
});
$('.drop_div').droppable({
    drop: handle_drop_patient
});

function handle_drop_patient(event, ui) {
    $(this).append($(ui.draggable).clone());
    $(ui.draggable).remove();
}