JQuery элементы сопротивления за пределами боковой панели

Я использую следующий скрипт для скрытой панелиJQuery элементы сопротивления за пределами боковой панели

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 ДИВ, и они не могут быть вытащили и сбросили внутри #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

источник

2014-04-06 Ben Ishak

Можете ли вы опубликовать полный, который не работает? Ссылка Fiddle будет полезна. –

@GaneshKumar https://github.com/benishak/jqui –

это фиксированная моя проблема

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

источник

2014-04-07 21:05:27

JQuery элементы сопротивления за пределами боковой панели

ответ

Смежные вопросы