Search code examples
javascriptjqueryhtmljquery-ui-draggablejquery-ui-droppable

jQuery drag elements outside a side panel

I'm using the following script for a hidden panel

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

I list some boxes in that panel and I tried to drag them and drop them out into a workspace

This is a working example with 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>

but when I try to use jQuery UI the elements are only draggable inside the #sidr div and they cannot be dragged out and dropped inside #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>

source code is available here in github https://github.com/benishak/jqui

Solution

  • this fixed my problem

    $(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
});