从浏览器中拖动所选内容

时间:2014-12-09 05:45:12

标签: javascript jquery drag-and-drop

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

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

提前致谢。

1 个答案:

答案 0 :(得分:0)

以下是将表格行的内容拖动到文本输入的方法。

包含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)内部引用了第一个元素被拖动到的元素,因此将其值设置为被删除元素的文本是一件简单的事情。

Demo