jQuery的可拖動

我是新來的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>

來源

2012-07-04 Kumar Htabmas

你有包含jquery和ui文件嗎？ – AlphaMale

needd script and dragable –

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

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

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

來源

2012-07-04 12:26:23

感謝satinder singh，Devjosh，mithilatw，AlphaMale它在添加ui文件（「」） –

@KumarHtabmas：快樂編碼 –

您還沒有包含在你頁面的jQuery UI的腳本文件否則它工作一切優秀看到它的工作here

來源

2012-07-04 12:16:06 Devjosh

應該

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

來源

2012-07-04 12:16:49 mithilatw

拖放，你必須遵循以下步驟：

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

下降

來源

2012-07-04 14:36:49 gaurang171

jQuery的可拖動

回答

相關問題