jQuery可拖动溢出隐藏？

Posted 2023-05-08

【中文标题】jQuery可拖动溢出隐藏？

【英文标题】：Jquery draggable outside of overflow hidden?

【发布时间】：2013-10-17 20:21:06

【问题描述】：

这是我现在所拥有的，到处查看***，所有解决方案都对我不起作用:(问题是我在某些元素上使用可拖动和可调整大小等。图片位于具有溢出属性的容器中。那出现了可拖动的问题，我不想将该对象移动到页面顶部的图片上，但该元素始终位于顶部的图片下方。Strane 问题是，如果我首先调整大小，那么我可以将元素移动到图片，在此之前没有任何变化:(另一个棘手的问题是我首先要调整大小，第二个对象来自那个元素，只是重叠它？

我已经为这两个修复尝试了很多解决方案，但没有运气。这是我现在所拥有的

CSS

#zidomotac
    width:100%;


#myWorkContent
width:100%;

    overflow-x: scroll;

    white-space: nowrap;
    box-sizing:border-box;
    margin-bottom:20px
    
.slikezamenjanje
    width: 100px;
    float:left;
    display: inline-block;
    vertical-align: middle;

.slikezamenjanje img
    max-height: 120px;
    overflow:hidden;
    width: 100%;

外部

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

功能

<script type="text/javascript">
        $(document).ready(function() 
            $('.slikezamenjanje').draggable().resizable(
      aspectRatio: 16 / 9,
    );
        );
    </script>

HTML

<div id="zidomotac"><img src="http://www.vectorimages.org/09/0920100513111825424.jpg"></div>

<div id="myWorkContent">

  <div class="slikezamenjanje"><img src="http://placekitten.com/200/200/"/></div>
<div class="slikezamenjanje"><img src="http://placekitten.com/200/200/"/></div>

</div>

</div>

这是工作的 jsfiddle http://jsfiddle.net/gorostas/CS93M/ 希望有人能找到解决办法

已编辑

也许我可以先调用可调整大小，然后在内部可拖动？

更新

如果我像这样使用可拖动

        $(document).ready(function() 
$(".slikezamenjanje").draggable(
            revert: "invalid" ,
            helper: function()
                $copy = $(this).clone();
                return $copy;,
            appendTo: 'body',
            scroll: false
        );
        );

我可以移动元素，但问题又回来了？

【参考方案1】：

我修好了小提琴，我希望它能如你所愿！ 你可以在这里试试： DEMO

我改变了什么：

jQuery :

$(function() 
    $( ".slikezamenjanje" ).draggable(
        revert: 'invalid',
        helper: 'clone',
        start: function() //hide original when showing clone
            $(this).hide();             
        ,
        stop: function() //show original when hiding clone
            $(this).show();
        
    );

    $( "#zidomotac" ).droppable( //set container droppable
        drop: function( event, ui )  //on drop
            ui.draggable.css( // set absolute position of dropped object
                top: ui.position.top, left: ui.position.left
            ).appendTo('#zidomotac'); //append to container
        
    );
);

我在您的容器上添加了一个可放置状态，因此您可以在其中拖放。 然后我使用了drop 事件，它允许我获取元素 (ui.draggable) 和放置元素的位置 (ui.position)。

所以我用.css() 设置绝对位置，然后用.appendTo() 附加到容器。

对于.draggable()，我刚刚添加了开始和停止事件以在隐藏/显示克隆时显示/隐藏原始元素。

CSS：

/* Custom style for dropped element */
#zidomotac .slikezamenjanje  
    position: absolute;

刚刚添加了这个类来为被删除的元素应用样式。

希望我能帮到你;)

【讨论】：

我在这里添加了可调整大小的可拖动...jsfiddle.net/23vR5/1...

哦，是的，我忘记了。否则可以吗？

哦，是的，对不起，我以为你是他！ ^^

像魅力一样工作，谢谢伙计，我不知道如何 txanks 很多，我花了一天的时间来做这个，再次 txanks。 zalepime.com/zalepime_zid.html