个人中心
gpt4 book ai didi

jquery - css overflow 隐藏除了剩下的所有内容

转载 作者：行者123 更新时间：2023-11-28 08:57:02 25 4
gpt4 key购买 nike

我正在尝试创建一个拖放框，例如购物车。但是，当我拖出盒子时，脚本中的框中的内容隐藏了我需要拖动的 div。我确实需要一个 scoll 条，这样底部和顶部就可以隐藏起来。有没有办法让只显示左边的内容？

这是我目前的演示:http://www.statuesplus.com/admin/stackoverflow.php

我正在使用 malihu 的自定义 jQuery 滚动条。我可以在这里找到:http://manos.malihu.gr

我发现隐藏它的代码在 js 文件中。可以在这里找到::http://www.statuesplus.com/admin/scroll/jquery.mCustomScrollbar.concat.min.js

在此文件中更改它的代码行是:

m.wrapInner("<div class='mCustomScrollBox mCS-"+e.theme+"' id='mCSB_"+c(document).data("mCustomScrollbar-index")+"' style='position:relative; height:100%; overflow:hidden; max-width:100%;' />")

可能的解决方法:必须有一种方法可以使我选择拖放的 jQuery 元素弹出此框，使其不受限制。也许我可以通过点击创建一个“克隆”作为解决方法？

或者我可以只显示左侧。但是要做到这一点，我需要更改 js。

如有任何想法，我们将不胜感激。

下面是我的代码:(注意我尝试使用的 div 称为“content2”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<style>
#fileEm {
  /* Note: display:none on the input won't trigger the click event in WebKit.
    Setting visibility: hidden and height/width:0 works great. */
  visibility: hidden;
  width: 0;
  height: 0;
}
.fileSelect {
    width: 250px;
    display: block;
    height: 20px;
}
.leftUpload {
    float: left;
}
.rightUpload {
    background-image: url(../images/bgGrunge.jpg);
    height: 500px;
    width: 500px;
    display: block;
    float: right;
    background-position: center;
    border-top-style: dashed;
    border-right-style: dashed;
    border-bottom-style: dashed;
    border-left-style: dashed;
    clip: rect(auto,auto,auto,auto);
    margin-bottom: 10px;
}
.catHolder {
    padding-left: 50px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    padding-top: 10px;
    display: block;
    margin-left: 15px;
    float: none;
    position: relative;
}
.cat {
    float: left;
    background-image: url(../images/bgCat.png);
    height: 30px;
    width: 133px;
    line-height: 30px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    font-size: 11px;
    text-align: center;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
    z-index: 33;
}
.catBox {
    float: left;
    background-image: url(../images/catagory.png);
    background-position: center;
    height: 483px;
    width: 166px;
    padding-top: 20px;
    background-repeat: no-repeat;
    padding-left: 20px;
    margin-right: 0px;
    z-index: 0;
}
.spacer {
    width: 150px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    display: block;
    top: 33px;
    margin-top: 15px;
    height: 25px;
}
.catItems {
    width: 133px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    padding-top: 5px;
    padding-left: 3px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    position: relative; 
}

.content2{
    margin: 40px;
    width: 171px;
    height: 433px;
    padding: 20px;
    background: #333;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    position: absolute;
    left: 220px;
    top: -25px;
}
</style>

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


<script src="scroll/jquery.mCustomScrollbar.concat.min.js"></script>




<script>
$( document ).ready(function() {


$(function() {
$( ".cat" ).draggable();

 $( ".catBox" ).droppable({
drop: function( event, ui )
     {
    $( this )
    $("<div class=\"catAdded\" id=\"catAdded\">"+ui.draggable.attr('id')+"</div>").appendTo(".catItems");
    $("#"+ui.draggable.attr('id')+"").remove();

    }
});



}); 

////




$( ".fileSelect" ).hide();
$( ".Name" ).hide();


$( "#test" ).click(function() 
    {
    alert( $( ".fileSelect" ).val());   
    });

$( "#Browse" ).click(function() 
    {


$( ".fileSelect" ).click();


    });

$( ".fileSelect" ).change(function() {
    $( "#Browse" ).hide();
    $( ".Name" ).show();
    //$( ".fileSelect" ).show();
    var value = $( ".fileSelect" ).val();
    $( ".Name" ).text( value );
alert($('.fileSelect').text.val())
});
});


</script>

<script>!window.jQuery && document.write(unescape('%3Cscript src="scroll/js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
    <!-- custom scrollbars plugin -->
    <script src="scroll/jquery.mCustomScrollbar.concat.min.js"></script>
    <script>
        (function($){
            $(window).load(function(){
                $("#content_1").mCustomScrollbar({
                    scrollButtons:{
                        enable:true
                    }
                });
            });
        })(jQuery);
    </script>


<link href="scroll/jquery.mCustomScrollbar.css" rel="stylesheet" />

</head>

<body><form action="" method="post" enctype="multipart/form-data">
<table width="777" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top"><div class="rightUpload">
      <div class="catBox" id="name">
      <div class="spacer" id="name"></div>
      <div class="catItems" id="name">


      </div><!-- CAT ITEM -->

      </div>
      <div class="catHolder">
            <div id="content_1" class="content2">
                    <div class="cat" id="Stack">Stack</div>
                    <div class="cat" id="Over">Over</div>
                    <div class="cat" id="Flow">Flow</div>
              <div class="cat" id="Stack">Stack</div>
                    <div class="cat" id="Over">Over</div>
                    <div class="cat" id="Flow">Flow</div>
                    <div class="cat" id="Stack">Stack</div>
                    <div class="cat" id="Over">Over</div>
                    <div class="cat" id="Flow">Flow</div>
                    <div class="cat" id="Stack">Stack</div>
                    <div class="cat" id="Over">Over</div>
                    <div class="cat" id="Flow">Flow</div>
                    <div class="cat" id="Stack">Stack</div>
                    <div class="cat" id="Over">Over</div>
                    <div class="cat" id="Flow">Flow</div>
                    <div class="cat" id="Stack">Stack</div>
                    <div class="cat" id="Over">Over</div>
                    <div class="cat" id="Flow">Flow</div>
                    <div class="cat" id="Stack">Stack</div>
                    <div class="cat" id="Over">Over</div>
                    <div class="cat" id="Flow">Flow</div>
                    <div class="cat" id="Stack">Stack</div>
                    <div class="cat" id="Over">Over</div>
                    <div class="cat" id="Flow">Flow</div>
                    <div class="cat" id="Stack">Stack</div>
                    <div class="cat" id="Over">Over</div>
                    <div class="cat" id="Flow">Flow</div>

            </div>
        </div>



    </div>
      </td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

</form>
</body>
</html>

最佳答案

您在可拖动元素的容器上将 overflow 设置为 hidden。当您拖动它们时，它们仍然是该 DOM 元素的一部分并遵守其规则，直到被丢弃。尝试添加:

#mCSB_1 {
    overflow:visible;
}

关于jquery - css overflow 隐藏除了剩下的所有内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20932497/

25 4 0
文章推荐： css - 加载字体的正确顺序是什么？
文章推荐： jquery - jqgrid过滤搜索但是截断
文章推荐： css - 有谁知道在 CSS3 转换后对 "fix"的破解 `background-attachment: fixed`？
文章推荐： javascript - Javascript 中的简单 BPM 或工作流程
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com