2012-07-04 111 views
1

我是新来的jQuery 。我有问题,在下面的代码。我保存为一个html文件,但可拖动箱子不在browser.Do可见我想安装“UI可拖动的插件“ 我哪里错了.... jQuery的可拖动

<style type="text/css"> 
    #draggable { width: 150px; height: 150px; padding: 0.5em; } 
    </style> 
    <script type="text/javascript"> 
    $(function() { 
     $("#draggable").draggable(); 
    }); 
    </script> 
</head> 



<div class="demo"> 

<div id="draggable" class="ui-widget-content"> 
    <p>Drag me and</p> 
</div> 

</div> 
+2

你有包含jquery和ui文件吗? – AlphaMale

+0

needd script and dragable –

+0

can u plz tel我,如何包括UI文件 –

回答

2

演示http://jsfiddle.net/QhVNr/

$(".draggable").draggable({ 
    axis: "y", 
    containment: 'parent' 
}); 
+0

感谢satinder singh,Devjosh,mithilatw,AlphaMale它在添加ui文件(“”) –

+0

@KumarHtabmas:快乐编码 –

0

您还没有包含在你页面的jQuery UI的脚本文件 否则它工作一切优秀 看到它的工作here

0

应该

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#draggable").draggable(); 
    }); 
</script> 
0

拖放,你必须遵循以下步骤:

1)包括最新的JQuery和JQuery UI的JavaScript文件以及还包括JQuery UI CSS

2)写HTML:

<div id="demo-frame"> 
    <div class="demo"> 
     <div id="draggable" class="ui-widget-content ui-draggable"> 
      <p>Drag me to my target</p> 
     </div> 
     <div id="droppable" class="ui-widget-header ui-droppable"> 
      <p>Drop here</p> 
     </div> 
    </div> 
</div> 

3)应用CSS:

#demo-frame { 
    border: 1px solid #DDDDDD; 
    clear: right; 
    height: 300px; 
    overflow: auto; 
    position: relative; 
    width: 520px; 
} 
#demo-frame .demo { 
    padding: 5px; 
} 

#draggable { 
    width: 100px; 
    height: 100px; 
    padding: 0.5em; 
    float: left; 
    margin: 10px 10px 10px 0; 
} 

#droppable { 
    width: 150px; 
    height: 150px; 
    padding: 0.5em; 
    float: left; 
    margin: 10px; 
} 
.ui-widget-content { 
    background: url("http://jqueryui.com/themeroller/images/?new=eeeeee&w=1&h=100&f=png&q=100&fltr[]=over|textures/03_highlight_soft.png|0|0|100") repeat-x scroll 50% top #EEEEEE; 
    border: 1px solid #DDDDDD; 
    color: #333333; 
} 

4)写jQuery脚本:用于拖动

$(function() { 
     $("#draggable").draggable(); 
     $("#droppable").droppable({ 
      drop: function(event, ui) { 
       $(this) 
        .addClass("ui-state-highlight") 
        .find("p") 
         .html("Dropped!"); 
      } 
     }); 
    }); 

我已经创建了垃圾箱和http://codebins.com/codes/home/4ldqpdd

下降