正文 

当前位置： 首页 > 知识 >

创建多个放置在彼此之上的可放置同级

     2023-05-08     34

关键词：

【中文标题】创建多个放置在彼此之上的可放置同级【英文标题】：Creating multiple droppable siblings that at positioned on top of eachother 【发布时间】：2012-09-25 07:39:47 【问题描述】：

我正在尝试创建多个彼此相邻的 jquery 可放置对象，其中某些部分可能会重叠，在这些情况下，我希望顶部（z-index 明智）的那个是贪婪的。

我已经尝试在 droppable 中设置 greedy: true 选项，但这似乎没有帮助。我还尝试在 drop 事件中使用return false 并使用event.stopPropagation();。

这是一个基于 jquery 的demo page 的jsfiddle。

如果有另一个 droppable 触发它，是否有任何方法阻止 drop 事件传播，最好是具有最高 z-index 的那个？

【问题讨论】：

【参考方案1】：

使用document.elementFromPoint 来检查光标正下方的元素。如果它不是你的 droppable，请不要做任何事情。 将以下内容添加到 drop: 处理程序的顶部：

var droppable = $(this);
ui.helper.css(pointerEvents: 'none');
var onto = document.elementFromPoint(event.clientX, event.clientY);
ui.helper.css(pointerEvents: '');
if(!droppable.is(onto) && droppable.has(onto).length === 0) 
    return;

在帮助器上禁用指针事件对于document.elementFromPoint 忽略您拖动的内容并仅在下方检查是必要的。我已经 updated 你的 jsFiddle 进行快速演示。请注意，突出显示仍然会影响这两个元素。您应该能够通过不让 jQuery UI 进行突出显示来改变这一点，而是自己在可拖动的 drag: 事件上编写它。然而，我发现这在实践中是不可用的，因为这个检查（和禁用指针事件）非常慢并且还可能导致闪烁。

【讨论】：

不错的解决方案！用 z-indexes 等寻找了大约 3 个小时的不同方法，但这只是简单而有效！【参考方案2】：

你需要一个函数来检查元素是否是最高可见元素。当

    该项目位于 dom 列表的后面 它具有更高的 z-index 集

下面的函数可以用来查看当前元素（无论是在over方法中还是在droppable设置中的drop方法中）是否实际上是最高可见元素。

function isHighestVisible(cEl) 
    cEl = $(this); //use this if you want to use it in the over method for draggable, else just pass it to the method

    //get all active droppable elements, based on the classes you provided
    var $list = $('.ui-widget-header.ui-state-active');
    var listCount = $list.length;
    var HighestEl = null;
    var HighestZI = -1;


    //one element is always highest.
    if (listCount<=1) 
        console.log(cEl.attr('id'));
        return true;
    

    //check each element
    $list.each(function(i) 
        var $el = $(this);

        var id = $el.attr('id');

        //try to parse the z-index. If its 'auto', return 0.

        var zi = isNaN(parseInt($el.css('z-index'))) ? 0 : parseInt($el.css('z-index'));

        if (zi>0) 
            //z-index is set, use it.
            //I add the listCount to prevent errors when a low z-index is used (eg z-index=1) and there are multiple elements.
            //Adding the listCount assures that elements with a z-index are always later in the list then elements without it.
            zi = zi + listCount;
         else 
            //z-index is not set, check for z-index on parents
            $el.parents().each(function() 
                $par = $(this);
                var ziParent = isNaN(parseInt($par.css('z-index'))) ? 0 : parseInt($par.css('z-index'));
                if (ziParent>0) 
                    zi = ziParent;
                    return false;
                
            );
        

        //add the current index of the element to the zi
        zi += i;

        //if the calculated z-index is highest, change the highest element.
        if (HighestEl==null || HighestZI<zi) 
            HighestEl=$el;
            HighestZI = zi;
        
    );

    //if the highest found active element, return true;
    if (HighestEl.attr('id')==cEl.attr('id')) 
        console.log(cEl.attr('id'));
        return true;
    

    //if all else fails, return false
    return false;

【讨论】：

这看起来很有希望。我还没有机会尝试它，但原理是合理的。但是，请注意，有效的 z 索引也可以是负数，并且每个定位元素（static 以外的任何值）都会打开自己的堆叠上下文，这意味着即使有效的 z 索引也必须遍历父元素找到了。 感谢您的支持和评论。我确实忘记了负 z-index 选项。我什至不知道你提到的第二部分。我很少在一个页面上多次使用 z-index，我猜我从来没有遇到过。【参考方案3】：

如果我有这个问题，我会使用 jQuery 的 .addclass

.droppablewidgetforce 
z-index: 1000 !important;

这样创建一个类，这样层无论如何都保持在顶部。这应该可以解决问题。

【讨论】：

也许我误解了你的答案，但问题不在于 z-index。问题是该事件在#droppable3 元素和droppable3-inner 元素上都被触发，而它只能在droppable3-inner 上触发，同时在两个元素上拖动它。我不确定将 droppables z-index 设置为 1000 对我有什么帮助。 从选择器列表中取出 droppable3 并使用该参数和所需参数创建新函数 这只将droppable放在draggable之上，这根本不是我想做的，也许你可以在jsfiddle中告诉我你的意思？【参考方案4】：

贪婪选项仅适用于具有可放置父级的嵌套元素。

在您的代码中，2 个可放置元素是同级元素，因此贪婪选项将不起作用：

<div id="droppable3" class="ui-widget-header">
    <p>Outer droppable</p>
</div>
<div id="droppable3-inner" class="ui-widget-header">
    <p>Inner droppable (greedy)</p>
</div>

如果您仍想使用兄弟姐妹而不是父母和孩子，这是一个混乱的解决方法。

直播代码example.

function normalDraggedOver() 
    $( this ).addClass( "ui-state-highlight" )
             .find( "> p" )
             .html( "Droppeeeed!" );


var options = 
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    greedy: true,
    drop: normalDraggedOver
;

var options2 = 
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    disabledClass: "ui-state-disabled",
    hoverStateClass: "ui-state-hover",
    greedy: true,
    greedyWithSibligs: true,
    drop: normalDraggedOver,
    over: function () 
    /* if we have previous siblings of the inner element we handle them as parents */
        if(options2.greedyWithSibligs && $(this).prev().length > 0)        
            $(this).siblings().slice(0, $(this).index())
            .removeClass(options2.hoverClass)
            .droppable('disable')
            .removeClass(options2.disabledClass)
            .removeClass(options2.hoverStateClass);
        
    ,
    out: function () 
    /* all the siblings of the inner element that were handled as parents act as one*/
        if(options2.greedyWithSibligs && $(this).prev().length > 0) 
            $(this).siblings().slice(0, $(this).index())
            .droppable('enable')
            .addClass(options2.hoverClass);
            console.log($(this).attr('id'));
        
    
;

【讨论】：

好吧，我仍在寻找更通用的解决方案：droppables 不应该是兄弟姐妹。我只希望绝对定位的 droppables 尊重z-index，因此当拖放到视觉上位于另一个元素前面的元素上时（这也是可拖放的），drop 应该只注册在前面的元素上。 z-index 的问题在于，如果你自己没有设置它，它的值总是'auto'。【参考方案5】：

如果只是想让它看起来一样，您可以将 #droppable3 设置为 position: relative 并将子 #droppable3-inner 设置为 position: absolute。

HTML：

<div id="droppable3" class="ui-widget-header">
    <p>Outer droppable</p>
</div>
<div id="droppable3-inner" class="ui-widget-header">
    <p>Inner droppable (greedy)</p>
</div>

这里是直播example

【讨论】：

这个例子需要我将 droppable3-inner 元素实际移动到 droppable3 元素中，我想避免这种情况。

用点击在彼此之上创建多个节点

】用点击在彼此之上创建多个节点【英文标题】：creatingmultiplenodesontopofeachotherwithtap【发布时间】：2017-02-0101:30:30【问题描述】：我想要做的是当用户点击屏幕时，我希望它在同一位置创建多个精灵，中间有延迟，下一个节点添... 查看详情

两个 ScrollView 在彼此之上？

...滚动视图中的图像。我现在有水平滚动视图，我在它后面放置了第二个滚动视图用于垂直滚动视图，但显然垂 查看详情

停止 seaborn 在彼此之上绘制多个图形

...thon（一直在使用R）进行数据分析。我正在尝试使用seaborn创建两个图，但它一直将第二个保存在第一个之上。如何阻止这种行为？importseabornassnsiris=sns.load_dat 查看详情

在没有换行/换行/换行的情况下将 100 个 div 彼此相邻放置的技巧？

...css语句可以将有限数量的div彼此相邻放置在右侧，而无需创建“换行符/换行符/换行符”并且具有定义宽度的包装器？就像将100个宽度为200像素、高度为60 查看详情

防止可拖动的 div 彼此靠近放置

】防止可拖动的div彼此靠近放置【英文标题】：Preventdraggabledivsfrombeingplacedneareachother【发布时间】：2019-09-2202:46:19【问题描述】：我正在使用jQueryUI制作一些可以拖放到地图上的图钉。每个图钉都需要与其他图钉留出一定的空白... 查看详情

StackView 布局并排并在彼此之上（如 zStack）

...目前有这个界面，我将MapView和UIView放在一起。UIView是我放置图表叠加层的位置（例如：心率）。当设备处于纵向模式时，这很好。但是，我想在横向模式下探索一种不同的布局，即U 查看详情

如何使用 jquery ui 可拖动突出显示悬停时的可放置​​区域

...，标题中的on是主要问题。我在标记为可放置的页面上有多个div元素。在这些div元素中，我有标记为可拖动的跨度。我想要它，所以当您拖动一个元素并将它悬停在一个可放置区 查看详情

Twitter bootstrap - 在彼此相邻放置时重叠的前置输入元素

】Twitterbootstrap-在彼此相邻放置时重叠的前置输入元素【英文标题】：Twitterbootstrap-prependedinputelementsoverlappingwhenplacednexttoeachother【发布时间】：2013-02-0120:26:04【问题描述】：我正在尝试使用display:table样式将两个输入元素彼此相邻... 查看详情

如何在 HTML 中将文本和图像彼此相邻放置？

】如何在HTML中将文本和图像彼此相邻放置？【英文标题】：HowtoplaceTextandanImagenexttoeachotherinHTML?【发布时间】：2013-06-1716:06:09【问题描述】：我希望文本和图像彼此相邻，但我希望图像位于屏幕的最左侧，并且我希望文本位于屏... 查看详情

如何使用 RealityKit 将 3D 模型放置在参考图像之上？

】如何使用RealityKit将3D模型放置在参考图像之上？【英文标题】：Howtoplacea3DmodelontopofareferenceimagewithRealityKit?【发布时间】：2021-12-2716:30:59【问题描述】：当它被识别时，我想将来自本地设备的3D模型放置在参考图像的顶部。为此... 查看详情

如何将状态栏放置在 OPENGL 之上？

】如何将状态栏放置在OPENGL之上？【英文标题】：HowtopositionstatusbarontopofOPENGL?【发布时间】：2013-06-0315:07:06【问题描述】：我现在遇到的问题是OpenGL与我的状态栏重叠，而窗口的菜单没有改变。任何想法如何解决这个问题？就像... 查看详情

将 Button 放置在具有不同屏幕尺寸的 ImageView 之上

】将Button放置在具有不同屏幕尺寸的ImageView之上【英文标题】：PlacingButtonontopofImageViewthatstretcheswithdifferentscreensizes【发布时间】：2015-08-2919:37:34【问题描述】：我有一个包含选项的图像(match_parent)，其中包含2个矩形。我试图在图... 查看详情

Android - 如何通过代码将图像放置在现有布局之上？

】Android-如何通过代码将图像放置在现有布局之上？【英文标题】：Android-howdoIplaceanimageontopofmyexistinglayoutthroughcode?【发布时间】：2010-10-2212:34:45【问题描述】：我有一个layout，我在其中显示一个webview。我想通过代码在特定位置... 查看详情

如何在一页上放置多个画布js动画。 （创建js）

】如何在一页上放置多个画布js动画。（创建js）【英文标题】：Howtoputmultiplecanvasjsanimationsononepage.(Createjs)【发布时间】：2015-11-0907:09:10【问题描述】：我正在尝试将多个js动画放在一个html页面上。我只用两个动画开始了我的测... 查看详情

如何在 HTML 中将一个图像放置在另一个图像之上？

】如何在HTML中将一个图像放置在另一个图像之上？【英文标题】：HowdoIpositiononeimageontopofanotherinHTML?【发布时间】：2010-09-0802:07:05【问题描述】：我是Rails编程的初学者，试图在一个页面上显示许多图像。有些图像要放在其他图... 查看详情

iOS 9.2.1 Xcode 7.2.1 UIPageControl 点被绘制在彼此之上

...在界面生成器中创建了一个UIViewController并在根UIView之上放置了一个UIPageControl，根UIView的背景颜色为橙色，UIPage 查看详情

我想使用 SnapKit 将顶部 UIView 放置在 UITableView 之上

】我想使用SnapKit将顶部UIView放置在UITableView之上【英文标题】：IwanttopositiontopUIViewontopofUITableViewusingSnapKit【发布时间】：2019-03-2813:55:03【问题描述】：我是用snapkit编写的UI渲染。我没有使用故事板或nib文件。。怎么写？下面是我... 查看详情

为放置区中的选择创建唯一 ID

】为放置区中的选择创建唯一ID【英文标题】：createuniqueIDsforselectsindropzone【发布时间】：2020-04-1718:26:21【问题描述】：我意识到这个问题与其他人发布的问题相似，但我希望有人可以帮助我解决这个问题：我在使用JQuery拖放的... 查看详情