2012-01-09 160 views
0

我已經使用了jQuery的佈局,並且在這個佈局中我使用了拖拽。但我無法得到爲什麼可丟棄的元素沒有在拖放區拖動。我用這對拖,但不能獲得成功可拖拽的元素在拖拽的頁面中拖動

jQuery(function() { 
    jQuery(".component").draggable({ 
     //use a helper-clone that is append to 'body' so is not 'contained' 
     //by a pane 
    helper: function() { 
          return jQuery(this).clone().appendTo('body') 
           .css({'zIndex':5,}).show(); 
    }, 
    cursor: 'move' 
    }); 

    jQuery('.ui-layout-center').droppable({ 
    accept: '.component', 
    drop: function (event, ui) { 
         jQuery(this).append(jQuery(ui.draggable).clone()); 
    } 
    }); 
}); 

我的HTML頁面是一樣的..

<div class="ui-layout-south"> 
    <button onclick="myLayout.toggle('north')">Toggle North Pane</button> 
</div> 

<div class="ui-layout-east"><span>Components</span> 
    <div class="component" style="width: 30px; border: 2px solid #CCC; 
        background: #009; padding: 10px;"></div> 
    <p><button onclick="myLayout.close('east')">Close Me</button></p> 
</div> 

<div class="ui-layout-center"> 
</div> 
+0

您的代碼正在工作。看到這個小提琴http://jsfiddle.net/WpRTc/ – Pavan 2012-01-09 05:34:50

+0

不,它沒有按照要求工作。在可丟棄區域,它不會再次拖動。 – Jackson 2012-01-09 05:37:04

回答

0

是你在找什麼?

http://jsfiddle.net/WpRTc/2/

我不確定你使用的是哪個jQuery版本。所以我在這裏使用了實時方法。如果您使用的是最新版本的jquery,那麼請嘗試「on」而不是直播。

+0

對不起,但我正在嘗試另一件事。我的意思是這段代碼正在工作,但是我可以看到當你拖動一個元素時,被拖動的元素會自動放置在另一個下面,而不需要。我希望該用戶可以拖動該元素並在該頁面中的任何位置調整該元素。 – Jackson 2012-01-09 06:21:39

+0

ohh ...好的,那麼當你的div被丟棄後你必須找到位置。看到這篇文章的實施http://stackoverflow.com/questions/849030/how-do-i-get-the-coordinate-position-after-using-jquery-drag-and-drop – Pavan 2012-01-09 06:27:35

+0

不,我必須放置元素在任何地方作爲用戶的需求。就像你在任何線框應用程序中所知道的那樣。 – Jackson 2012-01-09 06:33:39