从浏览器中拖动选定的内容

用户名

我想知道有什么方法可以发现这一点,如果我们在浏览器中选择内容(例如单击并拖动时突出显示),就可以知道使用jquery在浏览器中选择了什么。

例如,我有一个表,然后选择了该表的一行(如单击并拖动时突出显示),现在我想将其拖动到输入中。当我拖动内容时,我是否知道从浏览器中拖动内容的任何可能性。在这里,我没有使用任何jquery拖放表格。是否可以拖放,如果可能,我可以举个例子。

提前致谢。

詹姆斯·希伯德

这是将表格行的内容拖到文本输入中的方法。

包括jQuery和jQueryUI:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

制作表格和输入元素:

<table>
  <tr>
    <td>Dog</td>
  </tr>
  <tr>
    <td>Fish</td>
  </tr>
  <tr>
    <td>Cat</td>
  </tr>
</table>

<p>
  <input type="text" placeholder="Choose an animal" id="dropzone" />
</p>

添加以下JS:

$("tr").draggable({
  appendTo: "body", 
  helper: "clone"
});

$("#dropzone").droppable({
  drop: function(event, ui) {
    $(this).val(ui.draggable.text().trim());
  }
});

在drop函数内部,$(this)是指将第一个元素拖到其上的元素,因此只需将其值设置为放置的元素的文本即可。

演示版

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使浏览器窗口可拖动?

来自分类Dev

使用JavaScript从iframe中检测浏览器,并根据浏览器显示不同的<div>内容?

来自分类Dev

如何阻止浏览器调用中的iframe内容

来自分类Dev

Safari浏览器中的CSS宽度上限内容

来自分类Dev

Qt属性浏览器框架或Python中的类似内容

来自分类Dev

在浏览器中显示HTTP响应的内容而不刷新

来自分类Dev

PHP在浏览器中不显示任何内容

来自分类Dev

如何在浏览器中调试“混合内容”错误?

来自分类Dev

如何在谷歌浏览器中拖动/重新放置检查元素工具?

来自分类Dev

在某些浏览器中,从画布元素内部单击并拖动会突出显示其外部的文本

来自分类Dev

CSS-translate3d将导致元素在移动浏览器中可拖动?

来自分类Dev

如何通过css在IE浏览器中删除选定的选项背景颜色?

来自分类Dev

从浏览器窗口拖动的图像的默认文件名

来自分类Dev

如何在移动浏览器上拖动元素?

来自分类Dev

当可拖动div到达浏览器底部时滚动

来自分类Dev

跨浏览器无法选择/无法拖动的图像

来自分类Dev

从浏览器窗口拖动的图像的默认文件名

来自分类Dev

捕获浏览器内容的截图(网站)

来自分类Dev

在浏览器窗口顶部显示内容

来自分类Dev

IE浏览器innerHTML改变内容?

来自分类Dev

Javascript:获取浏览器的选定麦克风名称

来自分类Dev

不同的浏览器如何处理多个选定的选项

来自分类Dev

Windows上的Web浏览器中不会显示流浪汉服务器的内容

来自分类Dev

获取Ionic Framework以在iPhone / Android环境中显示内容(移动浏览器模拟器)

来自分类Dev

浏览器和服务器在实践中是否使用 HTTP 内容协商?

来自分类Dev

如何在浏览器中查看 docker 服务器内容

来自分类Dev

Firefox错误,拖动事件使dataTransfer.files = null,在所有其他浏览器中定义

来自分类Dev

Chrome浏览器中是否有与Opera中的搜索关键字相似的内容?

来自分类Dev

JHipster创建示例实体后,浏览器中未显示任何内容

Related 相关文章

  1. 1

    如何使浏览器窗口可拖动?

  2. 2

    使用JavaScript从iframe中检测浏览器,并根据浏览器显示不同的<div>内容?

  3. 3

    如何阻止浏览器调用中的iframe内容

  4. 4

    Safari浏览器中的CSS宽度上限内容

  5. 5

    Qt属性浏览器框架或Python中的类似内容

  6. 6

    在浏览器中显示HTTP响应的内容而不刷新

  7. 7

    PHP在浏览器中不显示任何内容

  8. 8

    如何在浏览器中调试“混合内容”错误?

  9. 9

    如何在谷歌浏览器中拖动/重新放置检查元素工具?

  10. 10

    在某些浏览器中,从画布元素内部单击并拖动会突出显示其外部的文本

  11. 11

    CSS-translate3d将导致元素在移动浏览器中可拖动?

  12. 12

    如何通过css在IE浏览器中删除选定的选项背景颜色?

  13. 13

    从浏览器窗口拖动的图像的默认文件名

  14. 14

    如何在移动浏览器上拖动元素?

  15. 15

    当可拖动div到达浏览器底部时滚动

  16. 16

    跨浏览器无法选择/无法拖动的图像

  17. 17

    从浏览器窗口拖动的图像的默认文件名

  18. 18

    捕获浏览器内容的截图(网站)

  19. 19

    在浏览器窗口顶部显示内容

  20. 20

    IE浏览器innerHTML改变内容?

  21. 21

    Javascript:获取浏览器的选定麦克风名称

  22. 22

    不同的浏览器如何处理多个选定的选项

  23. 23

    Windows上的Web浏览器中不会显示流浪汉服务器的内容

  24. 24

    获取Ionic Framework以在iPhone / Android环境中显示内容(移动浏览器模拟器)

  25. 25

    浏览器和服务器在实践中是否使用 HTTP 内容协商?

  26. 26

    如何在浏览器中查看 docker 服务器内容

  27. 27

    Firefox错误,拖动事件使dataTransfer.files = null,在所有其他浏览器中定义

  28. 28

    Chrome浏览器中是否有与Opera中的搜索关键字相似的内容?

  29. 29

    JHipster创建示例实体后,浏览器中未显示任何内容

热门标签

归档