draggable div不会被丢弃在jquery中的droppable div中

时间：2022-12-06 15:53:46

im having trouble in jquery's drag and drop functionality, i have the following code, which drags the element but it is not acceptable by the droppable element, can someone please point out whats wrong with this script?Thankyou

我在jquery的拖放功能方面遇到了麻烦,我有以下代码,它拖动了元素但是droppable元素无法接受,有人可以指出这个脚本有什么问题吗?谢谢你

<html>
 <head>
 <title>CRM</title>
    <link rel="stylesheet" href="style/style.css" type="text/css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>


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

        $(".dragable").draggable({
            cancel:"a.ui-icon",
            revert:true,
            helper:"clone",
            cursor:"move",
            revertDuration:0
        });

    $('.droppable').droppable({
        accept: ".dragable",
        activeClass: "ui-state-highlight",
        drop: function( event, ui ) {
        // clone item to retain in original "list"
        var $item = ui.draggable.clone();

        $(this).addClass('has-drop').html($item);

    }

});
    });
    </script>

</head>

<body>
    <div class="main-container">
        <div class="wrapper">
            <div class="tb-head">

                <div class="target">
                    <span class="target-span">Target</span>
                </div>

                <div class="user1">
                    <span class="user1-span">User1</span>
                </div>

                <div class="user2">
                    <span class="user2-span">User2</span>
                </div>

                <div class="user3">
                    <span class="user3-span">User3</span>
                </div>

                <div class="user4">
                    <span class="user4-span">User4</span>
                </div>

                <div class="clear"></div>
            </div>

            <div class="tb-body">

                <div class="inner-target">

                    <div class="dragable">
                        <span class="targetinn-span">Target Lead</span>
                    </div>

                    <div class="dragable">
                        <span class="targetinn-span">Assign1 Lead</span>
                    </div>

                    <div class="dragable">
                        <span class="targetinn-span">Assign2 Lead</span>
                    </div>

                    <div class="dragable">
                        <span class="targetinn-span">Assign3 Lead</span>
                    </div>

                </div>

                <div class="inner-user1">
                    <div class="droppable">
                        <span class="user1inn-span"></span>
                    </div>
                </div>

                <div class="inner-user2">
                    <div class="droppable">
                        <span class="user2inn-span"></span>
                    </div>
                </div>

                <div class="inner-user3">
                    <div class="droppable">
                        <span class="user3inn-span"></span>
                    </div>
                </div>

                <div class="inner-user4">
                    <div class="droppable">
                        <span class="user4inn-span"></span>
                    </div>
                </div>

                <div class="clear"></div>
            </div>
    </div>

</body>

</html>

1 个解决方案

#1

0  

I think your code is fine.Just give some width and height to droppable.

我认为你的代码很好。只需要一些宽度和高度可以放置。

<html>
 <head>
 <title>CRM</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>


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

        $(".dragable").draggable({
            cancel:"a.ui-icon",
            revert:true,
            helper:"clone",
            cursor:"move",
            revertDuration:0
        });

    $('.droppable').droppable({
        accept: ".dragable",
        activeClass: "ui-state-highlight",
        drop: function( event, ui ) {
        // clone item to retain in original "list"
        var $item = ui.draggable.clone();

        $(this).addClass('has-drop').html($item);

    }

});
    });
    </script>
<style>
.droppable{
width:200px;
height:200px;
border: 1px solid black;
}

</style>
</head>

<body>
    <div class="main-container">
        <div class="wrapper">
            <div class="tb-head">

                <div class="target">
                    <span class="target-span">Target</span>
                </div>

                <div class="user1">
                    <span class="user1-span">User1</span>
                </div>

                <div class="user2">
                    <span class="user2-span">User2</span>
                </div>

                <div class="user3">
                    <span class="user3-span">User3</span>
                </div>

                <div class="user4">
                    <span class="user4-span">User4</span>
                </div>

                <div class="clear"></div>
            </div>

            <div class="tb-body">

                <div class="inner-target">

                    <div class="dragable">
                        <span class="targetinn-span">Target Lead</span>
                    </div>

                    <div class="dragable">
                        <span class="targetinn-span">Assign1 Lead</span>
                    </div>

                    <div class="dragable">
                        <span class="targetinn-span">Assign2 Lead</span>
                    </div>

                    <div class="dragable">
                        <span class="targetinn-span">Assign3 Lead</span>
                    </div>

                </div>

                <div class="inner-user1">
                    <div class="droppable">
                        <span class="user1inn-span"></span>
                    </div>
                </div>

                <div class="inner-user2">
                    <div class="droppable">
                        <span class="user2inn-span"></span>
                    </div>
                </div>

                <div class="inner-user3">
                    <div class="droppable">
                        <span class="user3inn-span"></span>
                    </div>
                </div>

                <div class="inner-user4">
                    <div class="droppable">
                        <span class="user4inn-span"></span>
                    </div>
                </div>

                <div class="clear"></div>
            </div>
    </div>

</body>

</html>

#1

0  

I think your code is fine.Just give some width and height to droppable.

我认为你的代码很好。只需要一些宽度和高度可以放置。

<html>
 <head>
 <title>CRM</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>


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

        $(".dragable").draggable({
            cancel:"a.ui-icon",
            revert:true,
            helper:"clone",
            cursor:"move",
            revertDuration:0
        });

    $('.droppable').droppable({
        accept: ".dragable",
        activeClass: "ui-state-highlight",
        drop: function( event, ui ) {
        // clone item to retain in original "list"
        var $item = ui.draggable.clone();

        $(this).addClass('has-drop').html($item);

    }

});
    });
    </script>
<style>
.droppable{
width:200px;
height:200px;
border: 1px solid black;
}

</style>
</head>

<body>
    <div class="main-container">
        <div class="wrapper">
            <div class="tb-head">

                <div class="target">
                    <span class="target-span">Target</span>
                </div>

                <div class="user1">
                    <span class="user1-span">User1</span>
                </div>

                <div class="user2">
                    <span class="user2-span">User2</span>
                </div>

                <div class="user3">
                    <span class="user3-span">User3</span>
                </div>

                <div class="user4">
                    <span class="user4-span">User4</span>
                </div>

                <div class="clear"></div>
            </div>

            <div class="tb-body">

                <div class="inner-target">

                    <div class="dragable">
                        <span class="targetinn-span">Target Lead</span>
                    </div>

                    <div class="dragable">
                        <span class="targetinn-span">Assign1 Lead</span>
                    </div>

                    <div class="dragable">
                        <span class="targetinn-span">Assign2 Lead</span>
                    </div>

                    <div class="dragable">
                        <span class="targetinn-span">Assign3 Lead</span>
                    </div>

                </div>

                <div class="inner-user1">
                    <div class="droppable">
                        <span class="user1inn-span"></span>
                    </div>
                </div>

                <div class="inner-user2">
                    <div class="droppable">
                        <span class="user2inn-span"></span>
                    </div>
                </div>

                <div class="inner-user3">
                    <div class="droppable">
                        <span class="user3inn-span"></span>
                    </div>
                </div>

                <div class="inner-user4">
                    <div class="droppable">
                        <span class="user4inn-span"></span>
                    </div>
                </div>

                <div class="clear"></div>
            </div>
    </div>

</body>

</html>

标签：

相关文章