侧面板外的 jQuery 拖动元素答案

【问题标题】：jQuery drag elements outside a side panel侧面板外的 jQuery 拖动元素
【发布时间】：2014-04-06 01:24:23
【问题描述】：

我正在为隐藏面板使用以下脚本

http://www.berriart.com/sidr/#download

我在该面板中列出了一些框，并尝试将它们拖放到工作区中

这是一个使用 HTML5 的工作示例

<a id="simple-menu" href="#sidr">Jobs</a>
<div id="sidr">
    <div class="">
        <div class="window" id="flowchartWindow01" draggable="true" ondragstart="drag(event)"><strong>1</strong><br/><br/></div>
        <div class="window" id="flowchartWindow02" draggable="true" ondragstart="drag(event)"><strong>2</strong><br/><br/></div>
        <div class="window" id="flowchartWindow03" draggable="true" ondragstart="drag(event)"><strong>3</strong><br/><br/></div>
        <div class="window" id="flowchartWindow04" draggable="true" ondragstart="drag(event)"><strong>4</strong><br/><br/></div>
    </div>
</div>

<div class="demo flowchart-demo" id="flowchart-demo" ondrop="drop(event)" ondragover="allowDrop(event)">
<center>
<p>drop here</p>
</center>

</div>

但是当我尝试使用jQuery UI 时，元素只能在#sidr div 内拖动，并且它们不能被拖放到#flowchart-demo div 内

<body>
<a id="simple-menu" href="#sidr">Jobs</a>
<div id="sidr">
    <div class="">
        <div class="window" id="flowchartWindow01"><strong>1</strong><br/><br/></div>
        <div class="window" id="flowchartWindow02"><strong>2</strong><br/><br/></div>
        <div class="window" id="flowchartWindow03"><strong>3</strong><br/><br/></div>
        <div class="window" id="flowchartWindow04"><strong>4</strong><br/><br/></div>
    </div>
</div>

<div class="demo flowchart-demo" id="flowchart-demo">
<center>
<p>drop here</p>
</center>

</div>

<!-- JS -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script src="js/jquery.jsPlumb.js"></script>
    <script src="js/jquery.sidr.min.js"></script>
    <script src="js/demo.js"></script>
<script>
$(document).ready(function() {
  $('#simple-menu').sidr();
  $(function() {
    $(".window").draggable({ 
        revert: 'invalid', 
        scroll: true,
        containment: '#sidr',
        helper: 'clone',
    });
    $(".demo flowchart-demo").droppable({
        accept: '.window',
        activeClass: 'flowchart-demo',
    });
}); 
});
</script>
<!-- /JS -->
</body>

源代码在 github https://github.com/benishak/jqui 中提供

【问题讨论】：

你能发布完整的不工作吗？小提琴链接会很有帮助。
@GaneshKumar github.com/benishak/jqui

标签： javascript jquery html jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

这解决了我的问题

$(function() {
        $(".window").draggable({
            helper: function (e,ui) {
                return $(this).clone().appendTo('div#flowchart-demo').css('zIndex',5).show();
            } 
        });
        $("#flowchart-demo").droppable({
            accept: '.window',
            drop: function( event, ui ) { //on drop
            ui.draggable.css({ // set absolute position of dropped object
                top: ui.position.top, left: ui.position.left
            }).appendTo('#flowchart-demo'); //append to container
});

【讨论】：