Перетащите фоном div с оригинальным div

Есть некоторые divs с фоном divs. Нажимая на настройки, текущие divs скрываются и отображается фоновый div. Когда я собираю divs (Divs сортируются). Фоновые divs сохраняют свое исходное положение. А потом, когда я хочу увидеть его фона (Настройки дел) он поворачивает его из старого положенияПеретащите фоном div с оригинальным div

Сценарий, который вращается

 $('.flip_div').click(function() { 
     var div1 = $(this).parent(); 
     var div2 = $('#'+$(this).attr('attached-with')); 
     var toHide = div1.is(':visible') ? div1 : div2; 
     var toShow = div2.is(':visible') ? div1 : div2; 

     toHide.removeClass('flip in').addClass('flip out').hide(); 
     toShow.removeClass('flip out').addClass('flip in').show(); 
    });

FIDDLE

Re организовать дивы затем нажмите на настройки чтобы увидеть проблему

источник

2013-02-14 Muhammad Usman

Вы можете просто обернуть как заднюю, так и переднюю панели одним элементом и сделать его целью сортировки. Так, HTML (см <div class="single_panel"> вокруг спины и передней части):

<div class="single_panel"> 
      <section id="pannel_front_1" class="pannel"> 
       <h4 class="pannel_title">Pannel 1</h4> 
       <span class="flip_div div_menu" attached-with="pannel_back_1" >Settings</span> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, consequat.</p> 
      </section> 

      <section id="pannel_back_1" class="pannel" style="display:none"> 
       <h4 class="pannel_title">Back Side 1</h4> 
       <span class="flip_div div_menu" attached-with="pannel_front_1">back</span> 
        <p>Back Side.</p> 
      </section> 
     </div>

CSS для этого нового элемента:

.single_panel{ 
    overflow:hidden; 
    width: 100px; 
    float:left; 
}

И обновленный сортировкой код инициализации:

$(document).ready(function(){ 
    $(function() { 
     $("#sidebar").sortable({ 
      connectWith: ".single_panel", 
     }).disableSelection(); 
     });

Demo: http://jsfiddle.net/AFfNV/3/

источник

2013-02-14 08:53:33

Из-за класса = панели и сортировки вы столкнувшись с этим вопросом Итак, я сделал два изменения. 1. Добавлен DIV с классом = панелью и удаляется класс = панель из всех секций 2. Изменена Java Script немного HTML

<!doctype html> 

<body> 

<div id="pagewrap"> 
    <aside id="sidebar"> 
<div class="pannel"> 
     <section id="pannel_front_1" > 
      <h4 class="pannel_title">Pannel 1</h4> 
      <span class="flip_div div_menu" attached-with="pannel_back_1" >Settings</span> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, consequat.</p> 
     </section> 

     <section id="pannel_back_1" style="display:none"> 
      <h4 class="pannel_title">Back Side 1</h4> 
      <span class="flip_div div_menu" attached-with="pannel_front_1">back</span> 
       <p>Back Side.</p> 
     </section> 
     </div> 
     <div class="pannel"> 
     <section id="pannel_front_2" > 
      <h4 class="pannel_title">Pannel 2</h4> 
      <span class="flip_div div_menu" attached-with="pannel_back_2" >Settings</span> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p> 
     </section> 

     <section id="pannel_back_2" style="display:none"> 
      <h4 class="pannel_title">Back Side 2</h4> 
      <span class="flip_div div_menu" attached-with="pannel_front_2">back</span> 
       <p>Back Side.</p> 
     </section> 
     </div> 
       <div class="pannel"> 
     <section id="pannel_front_3" > 
      <h4 class="pannel_title">Pannel 3</h4> 
      <span class="flip_div div_menu" attached-with="pannel_back_3" >Settings</span> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
     </section> 

     <section id="pannel_back_3" style="display:none"> 
      <h4 class="pannel_title">Back Side 3</h4> 
      <span class="flip_div div_menu" attached-with="pannel_front_3">back</span> 
       <p>Back Side.</p> 
     </section> 
     </div> 
        <div class="pannel"> 
     <section id="pannel_front_4" > 
      <h4 class="pannel_title">Pannel 4</h4> 
      <span class="flip_div div_menu" attached-with="pannel_back_4" >Settings</span> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> 
     </section> 

     <section id="pannel_back_4" style="display:none"> 
      <h4 class="pannel_title">Back Side 4</h4> 
      <span class="flip_div div_menu" attached-with="pannel_front_4">back</span> 
       <p>Back Side.</p> 
     </section> 
     </div> 
          <div class="pannel"> 
     <section id="pannel_front_5" > 
      <h4 class="pannel_title">Pannel 5</h4> 
      <span class="flip_div div_menu" attached-with="pannel_back_5" >Settings</span> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> 
     </section> 

     <section id="pannel_back_5" style="display:none"> 
      <h4 class="pannel_title">Back Side 5</h4> 
      <span class="flip_div div_menu" attached-with="pannel_front_5">back</span> 
       <p>Back Side.</p> 
     </section> 
     </div> 


     <!-- pannel end --> 
    </aside> 
    <!-- sidebar ends--> 


</div> 
<!-- pagewrap ends--> 

</body> 
</html>

ява скрипт

$(document).ready(function(){ 
    $(function() { 
     $("#sidebar").sortable({ 
      connectWith: ".pannel", 
     }).disableSelection(); 
     }); 

     $('.flip_div').click(function() {    
     var div1 = $(this).parent(); 
     var div2 = $('#'+$(this).attr('attached-with')); 

     $(div1).removeClass('flip in').addClass('flip out').hide();   
     $(div2).removeClass('flip out').addClass('flip in').show();   

    }); 

});

И это делается. Попробуйте.

источник

2013-02-14 09:27:47

Перетащите фоном div с оригинальным div

ответ

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