标签: drag-and-drop

如何获得可拖动对象的位置

我试图获得x并y使用jQuery可拖动的对象.

场景是,我将一个对象拖放到另一个对象上,并希望得到拖放对象的位置.

编辑:现在我可以获得对象的位置,但我需要更多:

这是我尝试过的:

<script>
$(function() {
    $('#draggable').draggable({
        drag: function() {
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $(this).text('x: ' + xPos + 'y: ' + yPos);
        }
    });

    $("#droppable").droppable({
        drop: function(event, ui) {
            $(this)
                .addClass("ui-state-highlight")
                .find("p")
                .html("Dropped!");
        }
    });
});
</script>

Run Code Online (Sandbox Code Playgroud)

现在我可以获得可拖动对象的位置,但我需要它可以调整大小,除了获得可拖动对象之外x,y,我还需要它的大小.

jquery drag-and-drop position jquery-ui

Pab*_*buc

2019 02-21

29
推荐指数

2
解决办法

8万
查看次数

jQuery可拖动的表元素

jQuery的draggable功能似乎不适用于表(在FF3或Safari中).这是一种很难想象如何将工作,所以它不是令人惊讶的是它没有.

<html>
  <style type='text/css'>
    div.table { display: table; }
    div.row { display: table-row; }
    div.cell { display: table-cell; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script>
  <script>
  $(document).ready(function(){
    $(".row").draggable();
  });
  </script>
  <body>
    <div class='table'>
      <div class='row'>
        <div class='cell'>Foo</div>
        <div class='cell'>Bar</div>
      </div>
      <div class='row'>
        <div class='cell'>Spam</div>
        <div class='cell'>Eggs</div>
      </div>
    </div>
    <table>
      <tr class'row'><td>Foo</td><td>Bar</td></tr>
      <tr class='row'><td>Spam</td><td>Eggs</td></tr>
    </table>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

我想知道a)是否有任何具体原因导致这不起作用(从w3c/HTML规范角度来看)和b)获得可拖动表行的正确方法是什么.

我喜欢真正的桌子,因为边框折叠和行高算法 - 任何可以做这些事情的替代方案都可以正常工作.

css jquery drag-and-drop html-table

cdl*_*ary

2016 09-15

28
推荐指数

3
解决办法

5万
查看次数

使<div>可调整大小

有没有办法让drag'n'drop可以调整<div>容器的大小？这样用户可以使用拖放来改变它的大小？

真的很感激任何帮助!

html drag-and-drop resize

Chr*_*ris

2008 12-25

27
推荐指数

3
解决办法

4万
查看次数

Android GridView通过拖放重新排序元素

我正在处理的应用程序中有一个GridView.我希望能够通过拖放重新排序GridView中的项目.我已经为ListViews找到了很多帮助,但在GridViews上没有任何帮助.我希望在此启动器应用http://www.youtube.com/watch?v=u5LISE8BU_E&t=5m30s中实现此类行为.有任何想法吗？

android gridview drag-and-drop

Mar*_* C.

lucky-day

27
推荐指数

2
解决办法

3万
查看次数

将图像从另一个网站拖放到我的网站

我跑了一个快速谷歌搜索和搜索,发现了类似的问题,但没有一个很好形成,大多数都是旧的,看起来被遗弃(没有答案,一段时间没有评论).所以这里......

我希望能够收集从另一个网站上放到我网站上的图像的网址(只有网址)..(即我打开了两个镀铬窗口.窗口A有我的应用程序.窗口B在其中有重要意义我打开一个图像点击并将其拖到我的窗口然后放开.现在我需要知道我页面上丢失的图像的网址.

这是我正在使用本地文件的代码.

$(document).on('drop', function(e) {
    var data = e.dataTransfer || e.originalEvent.dataTransfer;
    console.log(data); // data.files is empty
    e.preventDefault();
    return false;
});?

Run Code Online (Sandbox Code Playgroud)

再一次,我不想上传任何东西..我不想做任何花哨的事情......我只需要知道从另一个网站上放置在页面上的图像的位置.

javascript jquery drag-and-drop cross-domain

rle*_*mon

2015 01-31

27
推荐指数

2
解决办法

8776
查看次数

HTML5拖放效果允许和dropEffect

这两个属性之间的关系似乎是一些混乱的根源.基于读取MDN站点和MSDN,我以为我已经弄明白了,但现在我不确定....

我认为当拖动一个元素时,你可以指定允许它发生的事情(即它可以移动,复制,链接到 - effectAllowed常量之一).这是effectAllowed属性.

不同的drop目标会做不同的事情,所以当你使用另一个元素时,它可以控制drop上发生的"效果",这就是"dropEffect"属性.所以我设置了一个简单的例子来测试这个理论.

的jsfiddle

$("[draggable='true']").on("dragstart", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.effectAllowed = "copyMove";
    dt.setData("text/plain", "Foo");
});

$("#dropZoneCopy").on("dragover", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.dropEffect = "copy";
    e.preventDefault();
});

$("#dropZoneMove").on("dragover", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.dropEffect = "move";
    e.preventDefault();
});

Run Code Online (Sandbox Code Playgroud)

我有一个用户可以拖动的框 - 允许的效果是"copyMove".我有一个框设置dropEffect复制,一旦设置dropEffect移动.我期望的是,当用户拖过"复制框"时,光标将改变以指示将发生复制,因为当我拖动"移动框"时,光标变化以指示移动...

只有Chrome的行为符合我的预期.这是因为其他浏览器是错误的还是因为我不了解规范.好吗？

更新来自摆弄这个的更多信息.

在Firefox和Chrome中,如果你有一个dragsource,表明effectAllowed是"copy",而dropzone就是dropEffect是"move",那么即使你取消了这个事件,你也不能放弃掉落区域.我认为dropEffect对于阅读ondrop看看该做什么很有用,但它在Chrome上不可用,dropEffect不会出现在drop handler上,例如尝试读取dataTransfer.dropEffect会说dropEffect是"没有"即使你把它放在dragover上.如上所述设置dropEffect确实会影响光标的显示方式.

在Firefox中,dropEffect来确实在悬浮窗来通过上的dragover被设置之后,但它并不会影响鼠标光标的显示.在Firefox窗口上按ctrl键确实会影响鼠标的显示,但不会影响dropEffect属性.

规范显示源可以监听dragend事件以查看发生的情况.它应该查看此事件中的dropEffect.Chrome,Mozilla和Safari正如您所希望的那样工作,dragend效果出现在dragend事件中.在IE中,如果允许的效果是一个简单的值,例如"复制",则任何成功的下降都会导致此值显示为drand上的dropEffect.如果effectAllowed是一个像copyMove这样的复合值,并且你试图通过设置dropEffect选择"移动"dragover,那么你运气不好,那将在dragend上的源码中作为dropEffect ="none"来实现.如果该效果是一个简单的值,那么你会遇到一个游标和一个dropEffect,这就是在dragstart上设置的effectAllowed.有趣的是,当你从IE11至少拖入一个本机应用程序(我之前假设)时,它似乎确实会出现dropEffect.

其他说明

在Mac上的Safari上 - 无法以编程方式设置effectAllowed,因此任何设置的dropEffect都是有效的.当您按下cmd键时,effectAllowed变为"move",当您按下alt键时,effectAllowed变为"copy".此后它可以正常工作,如果dropEffect不是这些effectAlloweds中的一个,则浏览器不允许删除.

更多信息 我花了一些时间在HTML5拖放库上工作,我在文档中写了更多关于这个和其他问题的文章,如果你有兴趣请看看项目

javascript jquery html5 drag-and-drop cursor

Woo*_*ody

2014 10-20

27
推荐指数

1
解决办法

1万
查看次数