Question

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

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

中找到

Answer 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
});

jQuery拖动侧面板外的元素

1 个答案: