标签: drag-and-drop

是否有可能使<button>(<input type="button">)在HTML中拖放Mozilla Firefox(同时仍然可以点击)？

以下代码片段适用于谷歌浏览器,但按钮和div按钮无法拖动Mozilla Firefox(除非Alt按下按键,不知道移动设备):

document.getElementById("myDiv").addEventListener(
  "dragstart",
  function (e) {
    e.dataTransfer.setData("Text", "myDiv")
  }
);

document.getElementById("myButton").addEventListener(
  "dragstart",
  function (e) {
    e.dataTransfer.setData("Text", "myButton")
  }
);

document.getElementById("myDivWithButton").addEventListener(
  "dragstart",
  function (e) {
    e.dataTransfer.setData("Text", "myDivWithButton")
  }
);

<div id="myDiv" draggable="true">Div</div>
<button id="myButton" draggable="true">Button</button>
<div id="myDivWithButton" draggable="true"><button>Div with Button</button></div>

我用draggable="true"和dataTransfer.setData,是不是我错过了什么？有一些明智的解决方法吗？

(如果你想知道我需要什么:我有一些东西可以拖动到某个位置或设置在默认位置[当前视图的中心],我的想法是通过按钮[d&d→选择两者]位置,单击→默认位置].我知道我想我可以尝试格式化<div>,使其看起来像一个<button>或简单地将控件分成两个元素,但我宁愿不.)

它应该是CSS和JavaScript的组合.要做的步骤应该是:

1. 将它放在所有其他元素之上(要指定哪个属性？)
2. 单击时捕获事件(要监听哪个事件？)
3. 鼠标移动时移动div.

但有什么细节？

编辑:这是一个链接,向您展示我的示例代码:http://www.singingeels.com/jqtest/

我有一个非常简单的页面,它引用了jquery-1.3.2.js,ui.core.js(最新版本)和ui.draggable.js(也是最新版本).

我有一个div,我可以很容易地拖动(当然使用鼠标):

<div id="myDiv">hello</div>

然后在JavaScript中:

$("#myDiv").draggable();

这是完美的.但是,我需要能够仅使用代码来模拟"拖放".我主要使用它,但问题是触发的事件是占位符事件.

如果你打开"ui.core.js"并滚动到底部......你会看到:

// These are placeholder methods, to be overriden by extending plugin
_mouseStart: function(event) { },
_mouseDrag: function(event) { },
_mouseStop: function(event) { },
_mouseCapture: function(event) { return true; }

为什么在我的模拟中没有正确地扩展事件,但是当你用鼠标点击它们时,它们是？ - 关于如何强制_mouseDrag:属性服从"ui.draggable.js"中的覆盖扩展的任何想法？

解决这个问题将是巨大的 - 我计划在以后展示主要的好处.

谢谢,-Timothy

编辑:这是一个链接,向您展示我的示例代码:http://www.singingeels.com/jqtest/

编辑2:点击上面的链接和查看源...你会看到我正在尝试做什么.这是一个片段:

$(document).ready(function() {
    var myDiv = $("#myDiv");

    myDiv.draggable();

    // This will set enough properties to simulate valid mouse options.
    $.ui.mouse.options = $.ui.mouse.defaults;

    var divOffset = myDiv.offset(); …

我正试图在JavaScript中检测HTML5拖放支持.Modernizr似乎没有处理这个测试用例.

我似乎无法绑定到html5拖放事件.

以下是模板的示例:

<script id="tabsTemplate" type="text/html">
    <div class="dropzone" for="tab"
        data-bind="event:{dragover: function(event){event.preventDefault();},
                          dragenter: function(event){event.target.addClass('dragover'); event.preventDefault();},
                          dragleave: function(event){event.target.removeClass('dragover'); event.preventDefault();}}
                          drop: function(event){console.log('blahblah!')}"></div>
    <h1 class="tab" draggable="true"
      data-bind="attr: {selected: $data.name === $item.selected()},
                 click: function(){$item.selected($data.name)},
                 event:{ dragstart: function(event){console.log('blah!!')},
                         dragend: function(event){document.getElementsByClassName('dragover')[0].removeClass('dragover')}}">
        ${name}

        <img src="icons/close-black.png" class="close button" role="button"
            data-bind="click: function(e){$item.close($data)}">
    </h1>
</script>

我所拥有的应该如预期的那样工作......只要我将它们设为正常的内联线,它就会发挥作用.但是,其他绑定不起作用!

我收到此错误消息:

未捕获的SyntaxError:意外的标记'||' 的jquery-tmpl.js:10

这里发生了什么？有什么我做错了吗？

我很惊讶有一个关于使用游标适配器和列表适配器进行拖放排序的少量信息.

我在stackoverflow上找到的最近的帖子就是这个:

/sf/answers/353333291/

但是,我不清楚如何实现CommonsWare建议的内容 - 澄清会非常有用.

到目前为止,我将游标数据绑定到列表适配器并将其设置如下:

mMyCursorAdapter = new MyCursorAdapter(getActivity(), null);
setListAdapter(mMyCursorAdapter);
getLoaderManager().initLoader(0, null, this);

生成列表但我现在希望将拖放功能添加到列表项.

我想知道从架构的角度来看这个问题的最佳方法,任何关于如何开发核心功能的指针也会很有用.

将项目拖动到浏览器中已有详细记录,HTML5使这更容易.

但是,我想知道是否以及如何将'n' 拖出浏览器.

在这种情况下,你就会有一个网页元素(例如锚),用户会点击和拖动OUT的浏览器上放置目标,浏览器会发送链接的对象(例如,一个href'd文件)直接到drop目标而不是开始通常的下载.

有谁知道这是否可能？

我正在尝试建立一个网站,用户可以将一些项目(div中的一个项目)拖动到页面上的其他div.它不是一张桌子左右,只是在页面的某个地方划分.

使用html5拖放它运行良好,现在我尝试为移动设备执行此操作.我可以将项目拖动到div,将它们放在那里并阻止这个dropzone,因为只有一个元素应该在dropzone中.我也可以将这个元素拖到另一个div或页面上的其他地方(如果我犯了一个错误,可放置区域只能在第一次删除div时工作)但是我不能在div中删除另一个现在为空的项目再次.

如何再次启用Dropzone？

如果一个被拖到另一个div上,是否有可能改变两个div的位置？

这是我的代码的相关部分:

<script type="text/javascript">
$ (init);
function init() {
    $(".dragzones").draggable({
        start: handleDragStart,
        cursor: 'move',
        revert: "invalid",
    });
    $(".dropzones").droppable({
        drop: handleDropEvent,
        tolerance: "touch",              
    });
}
function handleDragStart (event, ui) {}       
function handleDropEvent (event, ui) {
    $(this).droppable('disable');
    ui.draggable.position({of: $(this), my: 'left top', at: 'left top'});
    ui.draggable.draggable('option', 'revert', "invalid");
}
</script>
<body>
<div id="alles">
<div class="dropzones" id="zone1"><div class="dragzones" id="drag1">Item 1</div></div>
<div class="dropzones" id="zone2"><div class="dragzones" id="drag2">Item 2</div></div>
<div class="dropzones" id="zone3"><div class="dragzones" id="drag3">Item 3</div></div>
<div class="dropzones" id="zone4"><div class="dragzones" id="drag4">Item 4</div></div>
    <div class="dropzones" …

我有一个鞋盒类型(与基于文档相对)OS X应用程序,它将图像存储在应用程序的沙盒容器中.

这些图像可以通过Share Extensions(以NSURL的形式)共享,也可以通过拖放方式导出.

当图像被共享到图像编辑器(例如Acorn提供共享扩展)或放在图像编辑器上时,图像编辑器会从我的沙箱容器中打开文件,现在可以更改,重命名或删除此文件 - 这可能会导致在我的应用程序中的各种不一致.

首先,我很惊讶,因为我认为,沙箱中的文件只能由应用程序本身访问.但是,当我故意分享NSURL时,情况似乎并非如此.

那么如何防止有人可以更改我的沙箱容器中的文件,同时还提供拖放和共享扩展？

• 我尝试不共享NSURL但NSImages,但许多共享扩展不适用于NSImages,所以这不是一个好选择.
• 是否可以对沙箱中的文件进行写保护？
• 在我提供共享或拖放之前,我是否应始终将图像副本复制到临时位置(对于大图像可能会很慢？)

我很高兴听到您的建议或了解有关该问题的更多信息.

RecyclerView当我将一个项目从另一个项目拖放RecyclerView到它上面时,我需要以某种方式通知.

• 可能吗？
• 或者我应该使用经典的拖放框架？

RecyclerView蓝色项目在一个片段中RecyclerView,红色项目在另一个片段中.

我也尝试过使用ItemTouchHelper但是从ItemTouchHelper.Callback的onMove()方法在从外面移动项目时不会被调用RecyclerView.

private class CustomItemTouchCallback extends Callback {

    @Override
    public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        return makeMovementFlags(UP|DOWN|START|END, 0);
    }

    @Override
    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
        android.util.Log.d(TAG, "Move item  from:" + viewHolder.getAdapterPosition() + " to: " + target.getAdapterPosition());
        return true;
    }

    @Override
    public void onMoved(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, int fromPos, RecyclerView.ViewHolder target, int toPos, int …