是否可以将 HTML 元素拖出另一个元素并使用 jQuery 触发更改？答案

【问题标题】：Is it possible to drag an HTML element out of another element and trigger a change with jQuery?是否可以将 HTML 元素拖出另一个元素并使用 jQuery 触发更改？
【发布时间】：2010-04-07 16:20:07
【问题描述】：

我有一个容器元素，您可以将对象拖入其中。我想要它，以便如果您将一个元素拖出容器（当鼠标越过包含 div 的边界时）您要拖到的元素改变。我该如何安排？

$("#container img").draggable({ 助手：'克隆'， z索引：100 });

一旦图像越过“#container”的边界，我应该能够更改图像源。

【问题讨论】：

我拖动的元素是一个'img'，一旦它越过某一行，我想改变'img'的src属性。
如何设置拖动行为？ jQuery 用户界面？您可以发布任何示例代码吗？
#container 的overflow 设置是什么？

标签： javascript jquery drag-and-drop

【解决方案1】：

试试这个代码：

$(function() {
  $("#draggable").draggable();
  $("#droppable").droppable({ out: function() {
      $('#draggable').css('background-color', 'white');
    }, over: function() {
  $('#draggable').css('background-color', 'blue');
}
  });
});

这是我的 HTML：

<div id="droppable" style="width: 200px; height: 200px; border: 1px solid red; background-color: green;">
<div id="draggable" style="width: 50px; height: 50px; border: 1px solid pink; background-color: blue;">

【讨论】：