Question

下面的完整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：scroll，它们似乎被卡在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);
            }
        });
    });*/

Answer 1

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

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

从你的作品类中删除position:absolute解决了滚动条问题。

就改变它的尺寸而言，最好坚持使用静态值。

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;
}

Simplified Append

$(".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

Answer 2

我在你的css代码中发现了一些错字问题：例如heght中的.container和ooverflow

中的.test

此处的修复方法是删除overflow和.test中不需要的.pices并添加display：inline-block;在.pices。这是更新链接

https://jsfiddle.net/ahkeno/gwLaqtw2/

Jquery拖放滚动条问题

2 个答案: