Jquery可以在溢出之外隐藏?

前端之家收集整理的这篇文章主要介绍了Jquery可以在溢出之外隐藏?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这就是我现在所拥有的,看看stackoverflow无处不在,所有的解决方案都没有为我工作:(问题是我使用draggable和resizable一些元素等图片,这是容器中有溢出属性的地方.问题来了有了draggable,我希望不要将该对象移动到页面顶部的图片上,但是元素总是位于顶部的图片下面.如果我首先调整大小,我可以将元素移到图片之上没有改变:(另一个问题是我首先要调整大小,第二个对象来到那个元素,只是重叠它?

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

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/
我希望有人能找到解决方

EDITED

也许我可以先调用resizable然后在draggable里面?

UPDATE

如果我像这样使用拖拽

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

我可以移动元素,但它回来的问题?

解决方法

我修理了小提琴,我希望它做你想要的!
你可以在这里试试:
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
        }
    });
});

我在你的容器上添加了一个droppable状态,所以你可以在里面拖放.
然后我使用drop事件,它允许我获取元素(ui.draggable)和被删除元素的位置(ui.position).

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

对于.draggable(),我只是在隐藏/显示克隆时添加了启动和停止事件来显示/隐藏原始元素.

CSS:

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

添加此类以应用已删除元素的样式.

希望我帮助你;)

原文链接:https://www.f2er.com/jquery/177881.html

猜你在找的jQuery相关文章