jQuery UI 可拖动的元素是什么元素在 iframe 中被拖动

Question

这是我的代码，我试图在其中检测元素，jQuery UI draggable悬停在上面。我需要获取元素的对象和属性，例如类名（在本例中为 .sortable-grid、.sortable-table、.sortable-row、.sortable-cell）。

这里找到的答案只显示了如何获取可拖动项目本身（ui.helper或event.target），而不是它悬停在上面的元素。

最好的回答方法是使用准备好的JSFiddle，因为我的代码使用iframe，如果完整的代码发布在这里，它将不起作用：

JSFiddle

.HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.js"></script>
<div style="background-color:grey;display:inline;cursor:move" id="draggable">DRAG ME</div>
<iframe src="https://fiddle.jshell.net/piglin/UAcC7/1869/show/" id="frame" style="width:100%;overflow:visible" seamless="seamless" scrolling="no"></iframe>

.JS：

$("#draggable").draggable({
    drag: function(event, ui) {
        //Some code here
    }
}

Answer 1

可以通过修改另一个答案中的函数来适应此目的。在调整它以使用iframe的contentWindow并添加offset计算后，它现在可以工作了。

溶液

function allElementsFromPointIframe(x, y, offsetX, offsetY) {
  var element, elements = [];
  var old_visibility = [];
  while (true) {
    element = document.getElementById('frame').contentWindow.document.elementFromPoint(x - offsetX, y - offsetY);
    if (!element || element === document.getElementById('frame').contentWindow.document.documentElement) {
      break;
    }
    elements.push(element);
    old_visibility.push(element.style.visibility);
    element.style.visibility = 'hidden'; // Temporarily hide the element (without changing the layout)
  }
  for (var k = 0; k < elements.length; k++) {
    elements[k].style.visibility = old_visibility[k];
  }
  elements.reverse();
  return elements;
}
var selected = $('');
var tmpColor = 'transparent';
$("#draggable").draggable({
  drag: function(event, ui) {
    var el = $(allElementsFromPointIframe(event.pageX, event.pageY, $(frame).offset().left, $(frame).offset().top));
    var div = $(el).filter('ul, li').not($(this));
    selected.css({'backgroundColor': tmpColor});
    selected = div.last()
    tmpColor = selected.css('backgroundColor');
    selected.css({'backgroundColor': 'red'});
    console.dir(div);
  },
  iframeFix: true,
  iframeOffset: $('#iframe').offset()
});