javascript - JQuery UI - 可删除或排序 "clear"绝对位置元素彼此靠近

Question

我的页面上有灵活的记事本(或日历)之类的工具。我不想使用完整日历，而且我似乎无法完成一项特定功能来完成我的自定义元素。

我可能会对这个问题投反对票，因为我可能对我的方法(最好的起点)过于笼统，但我会尽力在这里提出一个真正有值(value)的问题。

问题:
当新元素放入同一个父元素中时，绝对定位元素是否可以相互“检测”并向下移动(如 JQ UI 可排序)？

我有两个或多个相邻单元格(父元素)(如日历)，“注释”(子元素)必须是绝对位置才能超过其父元素的宽度。

这是通用的“起始点”:
*我的网格( parent )可以是 Div 或 Table。我设法让子元素延伸/重叠到父元素之外以覆盖多个相邻单元格。它们完美地落在可转换区域并对齐左上角，但转换的元素不会看到彼此。

值得赞扬的是 FullCalander，它在月 View 中做到了这一点:(如下)

• 所以我的问题可能是绝对位置不是正确的出路
• 可排序可能是答案，但子级宽度不会超过父级宽度
• 我尝试过 CSS 并在 Stack 上阅读了许多绝对位置文章

我有一种感觉，我的方法是错误的(使用绝对)所以希望持反对意见的选民能够怜悯我的灵魂并解释我的问题的答案是“不，他们不能”但请提出改进​​我应对这一挑战的方法的建议。

$(".droppable").droppable({
    drop: function (event, ui) {
        accept: ".draggable"
        activeClass: "ui-state-hover"
        hoverClass: "ui-state-active"
        $(ui.draggable).offset($(this).offset());
        // $(ui.draggable).data('dropped', true); 
        //var count = $(this).length;
        var currentPos = $(this).position();
        $("#pos").text("CURRENT: \nLeft: " + currentPos.left + "\nTop: " + currentPos.top);

var count = $(this).length;          //wrong child count or absolute not found/counted
var count = $(this).children.length; //wrong child count or absolute not found/counted
        // alert(count);

//this shoud show child count like .length - broken
// var countChild = (document.elementFromPoint(currentPos.top, currentPos.left));
   // alert(countChild);
   // console.log(countChild);   
  }
});

<强> JSFiddle

Answer 1

您可以使用document.elementFromPoint

The elementFromPoint() method of the Document interface returns the topmost element at the specified coordinates.

因此，在 hover 事件或类似事件中，您可以检查目标元素(日历中的事件)是否已存在于特定坐标处。在此基础上，您可以在被拖动的元素上设置标志或数据，以帮助在放置后进行定位。

希望是我的answer here将帮助您更好地了解如何使用它。