个人中心
gpt4 book ai didi

Jquery拖放滚动条问题

转载 作者：太空宇宙 更新时间：2023-11-04 10:05:55 24 4
gpt4 key购买 nike

下面是完整的 HTML 文件。下面的问题。 

<!DOCTYPE html>
<html>
<head>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<title>slider</title>

<style>

.container{
    width: 100%;
    heght: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    overflow: hidden;
}

.test{
    ooverflow: hidden;
    border: 1px solid green;
}

.header{
    height: 100px;
    border: 1px solid orange;
    margin-bottom: 1px;
}

.pices{
    width: 255px;
    height: 600px;
    border: 1px solid black;
    overflow-x: scroll;
    margin-bottom: 40px;
    margin-right: 25px;
    position:absolute;
}

.image{
    width: 90%;
    height: 200px;
    background-color: lightblue;
    margin: 10px 0 10px 10px;
}


.board{
    width: calc(100% - 300px);
    height: 600px;
    border: 1px solid red;
    float: right;
    margin: 0;
}


</style>


  <script>

  $(document).ready(function(){
        $(".image").draggable({ 
            opacity: 0.7, 
            helper: function(event) {
                return $(event.target).clone().css({
                    width: $(event.target).width()
                });

            }
        });  

        $(".board").droppable({
            accept: ".image",
            drop: function(event,ui){
                var itemToClone = $(ui.draggable);
                $(this).append(itemToClone.clone().css({
                    width: itemToClone.width(),
                    margin: 0
                }));
            }
        });
    });


 </script>


</head>
  <body>
    <div class="container">

        <div class="header">



        </div>
        <div class="test">
            <div class="pices">

                <div class="image"></div>
                <div class="image"></div>
                <div class="image"></div>
                <div class="image"></div>
                <div class="image"></div>

            </div>

            <div class="board">



            </div>
        </div>

      </div>
  </body>
</html>

所以，我一直在尝试从滚动框中获取 div 以拖出，但没有成功。由于 overflow-x: 滚动，它们似乎被困在那个 div 中，但是，我需要这个。然后，当它们确实落入右侧 div 时，它们的大小不同，或者如果它们的大小相同，则它们不可移动。我已经尝试了以下代码来让它工作但没有运气。任何建议都会有所帮助，谢谢。我还有一个 jsfiddle工作示例

/*
    // there's the gallery and the trash
    var $gallery = $( ".pices" ),
    $board = $( ".board" );

    // let the gallery items be draggable
    $( "div", $gallery ).draggable({
        cancel: "a.ui-icon", // clicking an icon won't initiate dragging
        revert: "invalid", // when not dropped, the item will revert back to its initial position
        containment: "document",
        helper: "clone",
        cursor: "move"
    });*/

    /*$(function() {

        $( ".image" ).draggable({
            helper: 'clone',
            appendTo: 'div.board'
        });

        $(".image").draggable({ 
            zIndex: 999
        });

        $( ".board" ).droppable( {
            accept: '.image',
        });

     });*/

     /*$(function() {

        $( ".image" ).draggable({
            containment: $('.pices'),
            helper: 'clone'
        });

        $( ".board" ).droppable( {
            accept: '.image'
        });

     });*/


     /*$(function() {

        $( ".image" ).draggable({
            revert: true,
            zIndex: 9999,
            appendTo: 'board',
            start: startedDrag,
            stop:stoppedDrag
        });

        function startedDrag() {

            $('.pices').css({
                overflow: 'visible',
            });
            $('.test').css({
                overflow: 'hidden',
            });
        }

         function stoppedDrag() {

            $('.pices').css({
                overflow: 'scroll',
            });
        }


        $( ".board" ).droppable( {
            accept: '.image'
        });

     });*/



    /*$(function() {

        $( ".image" ).draggable({
            scroll: false,
            revert: 'invalid'
        });

        $( ".board" ).droppable( {
            drop: function(event, ui) {
                //jQuery(this).addClass('dropped');

                var clone = ui.draggable;
                clone.appendTo(this);

                // this assumes the mouse grabbed in the middle of the div

                //var width = clone.width();
                //var height = clone.height();
                //clone.offset({'top':event.pageY-height/2 ,
                             // 'left':event.pageX-width/2 })
            }
        });

    });*/


    /*$( document ).ready(function() {

        $( ".image" ).draggable({
            helper: 'clone',
            zIndex: 9999999
        });

        $( ".board" ).droppable({
            accept: '.image',
            drop: function( event, ui ) {
                $(ui.draggable).clone().appendTo($(this));
            }
        });
    });*/

    /*$( document ).ready(function() {

        $( ".image" ).draggable({
            helper: 'clone',
            zIndex: 9999999
        });

        $(".board").droppable({
            accept: ".image",
            drop: function(event, ui) {
                var cloned = $(ui.helper).clone();
                cloned.attr("id", "clonedElem" + counter);
                var pos = $(ui.helper).offset();

                var draggableOffset = ui.helper.offset(),
                    droppableOffset = $(this).offset(),
                    left = draggableOffset.left - droppableOffset.left,
                    thisTop = draggableOffset.top - droppableOffset.top;

                cloned.css({
                    "position": "absolute",
                    "left": left,
                    "top": thisTop
                });

                cloned.attr("visible", "true");

                cloned.draggable({
                    containment: 'parent',
                    stop:function(ev, ui) {
                        console.log("aqui");
                    }
                });
                $(".board").append(cloned);
                    counter++;
            }
        });
    });*/



    /*$( document ).ready(function() {

        $( ".image" ).draggable({
            helper: 'clone',
            zIndex: 9999999
        });

        $( ".board" ).droppable({
            accept: '.image',
            drop: function( event, ui ) {
                $(ui.draggable).clone().appendTo(this);
            }
        });
    });*/

最佳答案

我拿了你的代码并做了一些修改。

这是我使用 display:inline-block 实现的解决方案，目的是让棋子和棋盘容器对齐。

从您的 pieces 类中移除 position:absolute 可以解决滚动条问题。

就 block 的大小变化而言，最好坚持使用静态值。

CSS

.pices{
    width: 255px;
    height: 600px;
    border: 1px solid black;
    margin-right: 25px;
    overflow:auto;
    display:inline-block;
}

.image{
    width: 215px;
    height: 200px;
    background-color: lightblue;
    margin: 10px 0 10px 10px;
}

.board{
    width: calc(100% - 300px);
    height: 600px;
    border: 1px solid red;
    margin: 0;
    display:inline-block;
    position: absolute;
}

简化追加

$(".board").droppable({
    accept: ".image",
    drop: function(event,ui){
        ui.draggable.css('width',ui.draggable.width()+'px').css('display','inline-block');
        $(this).append(ui.draggable);
    }
});

参见 Fiddle

关于Jquery拖放滚动条问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38013808/

24 4 0
文章推荐： twitter-bootstrap - 汉堡菜单与导航栏断开连接
文章推荐： css - Mechanize page.search 不适用于 link.click 方法
文章推荐： jquery - 调整图像容器不缩放
文章推荐： python - 合并一个数据框中与另一个数据框中的特定列不匹配的行 Python Pandas
太空宇宙
个人简介

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

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