标签: drag-and-drop

我想知道如何拖放文件夹并获取其名称.我已经知道如何使用文件,但我不确定如何修改它以便能够拖动文件夹.这是删除文件时触发的事件代码:

private void checkedListBox_DragDrop(object sender, DragEventArgs e)
{
    if (e.Data.GetDataPresent(DataFormats.FileDrop))
    {
        // NB: I'm only interested in the first file, even if there were
        // multiple files dropped
        string fileName = ((string[])e.Data.GetData(DataFormats.FileDrop))[0];
    }
}

我在网格中使用拖放功能,如下所示:

{
xtype: 'gridpanel',
id: 'editlinesGrid',
title: 'line',
forceFit: true,
store: 'gridEditlines',
region: 'center',
viewConfig: {
    plugins: [
    Ext.create('Ext.grid.plugin.DragDrop', {
        ptype: 'gridviewdragdrop'
    })],
    listeners: {
        drop: {
            fn: me.onGriddragdroppluginDrop,
            scope: me
        }
    }
},
columns: [{
    xtype: 'rownumberer',
    dataIndex: 'stopOrder'
}, {
    xtype: 'gridcolumn',
    dataIndex: 'stopId',
    text: 'stopId',
    field: {
        xtype: 'combobox',
        allowBlank: false,
        displayField: 'stopId',
        store: 'gridStops'
    }
},

当我将行拖到更高或更低的位置时,我需要将新位置发送到服务.我需要发送的是:

{
"stopOrder": 1,  <-- here should be the new position in the grid
"stopDTO": {
"stopId" : 1
} …

这是我想要的行为:

1. 用户开始从文件资源管理器中拖动文件
2. 当文件悬停在浏览器窗口上时,会出现3个删除区域
3. 当用户取消拖放或删除文件时,拖放区域会消失.

我遇到的问题是#3.
使用dragenter开启时,掉落区域显得很好,document但我不能再让它们消失.

我已经尝试过dragend从不发射的绑定,dragleave每次拖动离开后代时都会触发,因此拖动区域会闪烁.

哪个事件是正确的听？

Java Swing SwingUtilities.invokeLater()允许您将一个线程入队,以便在处理完最后一个AWT事件(用户手势)后运行.

为invokeLater()保证等到拖放动作完成后？

我目前正在编写HTML5拖放代码.在某个区域,我希望将它的拖动图像设置为垃圾图标,并且当鼠标位于可拖动区域上以具有非特定图像时.我有事件停止和逻辑工作,但它似乎不像setDragImage()函数可能只在dragstart函数上可用.这真的是你可以分配setDragImage()的唯一事件吗？我仔细研究了这个规格,似乎没有任何说法.

我正在使用jquery.tablednd.0.7.min.js拖放表行.当我在表中动态添加新行(即使用javascript添加行)时,新行没有拖动n drop.可以拖动表中已存在的其他行.

我认为这个新行没有与jQuery拖放代码同步.

我加入如新排本.

这是jquery dragnDrop文件代码.

在页面加载时,我使用此代码将此功能分配给表

$(document).ready(function() {
    $("#tableId").tableDnD({
        onDragClass : "myDragClass",
        onDrop : function(table, row) {

        },
        onDragStart : function(table, row) {
            console.log("drag start");
        }
    });
});

我已经创建了一个拖放游戏,以便开始自学jquery.一切似乎都有效,但你可以将多个项目放在同一个方格上.如果占位符中有图像,我想禁用droppable.

我调查过:

`greedy: true`

这会禁用掉线,但我不知道如何再次启用它,还有:

$(this).droppable( 'disable' );

如果块/图像恢复到原始位置或移动到另一个方块,我可以得到这两个来禁用掉落但不知道如何让它们再次启用它.

完整版:http: //creativelabel.co.uk/drag-and-drop/

更新:这是可放置插槽的代码.

  for ( var i=0; i<=19; i++ ) {
  var images = 'images/slot' + slotNumbers[i] + '.jpg';
$('<div class="placeholder"><div class="img-slot"></div></div>').attr('id', 'slot'+slotNumbers[i]).data( 'slotNumbers', slotNumbers[i] ).appendTo( '#imgSlots' ).droppable( {
      accept: '#images img',
      hoverClass: 'hovered',
      drop: handleDropEvent,
      activate: handleDragEvent
});

这是drop:事件代码:

  function handleDropEvent( event, ui ) {
  var slotNumber = $(this).data( 'slotNumbers' );
  var imgNumber = ui.draggable.data( 'number' );
  ui.draggable.addClass( 'dropped' );
  $(this).droppable( 'disable' );
  ui.draggable.position( { of: …

我有一个从数据库中检索并在html上显示的照片列表.我想通过允许用户拖动并放置在其他图片位置并替换它来创建订单功能.

类似于netflix的队列优先级

有没有JQuery插件？我必须从头开发吗？

由于Scrooby的回答,我发现了我正在寻找的内容,请参阅下文

目前我有两张桌子说Table-A, Table-B.我的任务是将行从Table-A拖到Table-B或将Table-B中的行拖到自身上.使用TransferHandler我已经完成了这项任务.但我的问题是,我无法识别从哪个表行被拖动到Table-B...即,从表-A到表-B或从表-B到自身.在exportData方法中TransferHandler我将一些额外的数据添加到其中一个列.基于此,当我通过importData方法导入数据时,我能够找出使用我添加数据的特定列来自哪个表.我知道这根本没有被推荐..所以我需要知道是否有一个很好的方法来解决这个问题？

我正在设计一个表单构建界面.所有可用字段都位于界面左侧的无序列表中,右侧有一个大的空的无序列表,它将成为我的webform.使这个界面工作的"技巧"是将左侧的列表项转换为有效的html元素,方法是将html附加到droppable ui元素中,然后将它们附加到右侧的可排序列表中.

我有它工作......主要是...使用draggable()和sortable().目前,我使用sortable的receive事件从draggable元素中获取id,我将其置于data()块中以传递给update事件.从那里,我使用id元素进行ajax调用,确定它是什么类型的字段以及应该从后端添加哪些选项,构建元素,然后将其放在接口中使用ui.item.html,这是一个由更新功能.

我的方法的问题是它在拖动元素时也会触发,这会导致选择元素在无意中附加到可排序列表时乱丢屏幕.显然,receive事件是仅在排序从连接列表中获取项目时触发的事件.但是,如果我尝试内部html ui.item元素,它会更改源列表,而不是所需的目标.当项目已经在右侧的网络表单列表中时,如果它们只是被排序,我绝对不想修改它们.

有没有办法在连接sortable()列表接收事件中访问和更改目标html ？还有其他策略可以解决我的挑战吗？

代码:

<div class="grid_3 mainwindow formfields">

    <h3>Available Fields</h3>
    <div id="accordion">
         <ul>
            <li>First Name</li>
            <li>Last Name</li>  
            <li>Company</li>            
         </ul>
    </div>

    </div>
    </div> 

    <div class="grid_12 formcontainer formfields">
    <h3>Webform</h3>
    <form id="form" action="http://responses.smarttracks.com" method="post">
         <input type="hidden" name="webform_id" id="webform_id" value="<?php echo $webform_id ?>"></input>

         <ul id="webform_list"></ul>
    </form>
    </div>

和jQuery

/*****  Make webform fields draggable   *****/
    $( ".master_list li" ).draggable({
        connectToSortable: "#webform_list",
        helper: "clone",
        revert: "invalid"
    });

/*****  Make form elements sortable *****/
    $( "#webform_list" ).sortable({
        revert: …