拖拽不在网站上工作

时间:2014-05-10 09:58:37

标签: javascript jquery drag-and-drop

当我尝试在jquery中使用拖放时,我运行它不能在我的项目中工作,但是当我在小提琴中复制相同的html时,它对我有效。请帮助我为什么它不能在我的项目中工作但是当我用相同的代码来调整它时,它开始工作。

 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
            <script src="//code.jquery.com/jquery-1.10.2.js"></script>
            <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
            <link rel="stylesheet" href="/resources/demos/style.css">

 $(function () {
                    $("#droppable").droppable({
                        stop: function (event, ui) {
                            alert('drop');
                        }
                    });

                    $(".draggable").draggable({
                        containment: 'document',
                        cursor: 'move',
                        revert: "invalid",

                    });
                    $(".droppable_widget,.draggable_widget").sortable({
                        connectWith: ".droppable_widget,.draggable_widget",
                        start: function (event, ui) {
                        },
                        stop: function (event, ui) {
                            var item = $(ui.item);

                            var to = item.parent().is(".droppable_widget");
                            var siblingsCount = item.siblings().size();
                            if (to && siblingsCount > 0) {
                                alert("only one item allowed here");
                                return false;
                            }
                        }
                    });

                    $(".connectedSortable").sortable({
                        connectWith: ".connectedSortable"
                    }).disableSelection;

                });




<div style="width: 50%; padding-left: 15px; padding-top: 15px; float: left;">
                                        <div id="users"><div class="draggable_widget ui-sortable"><ul class="connectedSortable ui-sortable" id="T1" style="">Team#0<li>1</li><li>1</li><li>2</li><li>2</li></ul></div><div class="draggable_widget ui-sortable"><ul class="connectedSortable ui-sortable" id="T2" style="">Team#1<li style="" class="">2</li><li>2</li></ul></div></div>

                                    </div>
<td class="tcol cnt"> <div><p id="H1">1</p><div style="height:100px;background-color:aqua;width:100px;" class="droppable_widget"></div><br><p id="H1">1A</p><div style="height:100px;background-color:aqua;width:100px;" class="droppable_widget"></div><br></div></td>

1 个答案:

答案 0 :(得分:0)

// 替换为 http:// https://

  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

使用

更改以上代码
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>