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

用户名

我想知道有什么方法可以发现这一点,如果我们在浏览器中选择内容(例如单击并拖动时突出显示),就可以知道使用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 条评论
登录 后参与评论

相关文章

JS - 在浏览器中查看选定的图像

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

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

Ionic:在Inapp浏览器中打开html内容

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

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

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

如何替换显示:浏览器Edge中的内容

在Forge Viewer中更改模型浏览器的内容

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

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

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

CSS-如何在Google Chrome浏览器中调试活动/选定的输入元素

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

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

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

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

IE浏览器innerHTML改变内容?

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

内容被较小尺寸的浏览器覆盖

在浏览器上下载选定的文本-浏览器扩展

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

使用选定的浏览器启动IPython Notebook

使用选定的浏览器启动IPython Notebook

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

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

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

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

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