요소를 다시 원래 위치로 이동

Question

enquire.js 플러그인을 사용하여 브라우저 너비에 따라 DOM의 요소 위치를 이동시키는 데이터 속성으로 저장된 미디어 쿼리를 구문 분석합니다.

그래서 수동으로 불일치를 지정할 때 잘 작동하는 다음을 작성했습니다. 문제는 입니다. 원래 위치를 기억하고 요소가 미디어 쿼리 밖에있을 때 요소를 자동으로 뒤로 이동 시키길 원합니다.

그러나 이전에 참조했던 prev/next 요소도 이동하는 문제가 있습니다. 요소를 원래 위치로 되돌릴 수있는 또 다른 방법이 있습니까? 아니면 요소를 이동하는 대신 요소를 숨기는 것이 좋습니다.

/* 
* Organise elements using meta data 
* 
* @example: 
* data-respond='{ 
*  "query":"screen and (max-width:481px)", 
*  "match": { 
*   "target": "#page", 
*   "method": "appendTo" 
*  }, 
*  "unmatch":{ 
*   "target": "#footer", 
*   "method": "appendTo" 
*  } 
* }' 
*/ 
var $this, 
data, 
options, 
allowedMethods = ['appendTo', 'prependTo', 'insertAfter', 'insertBefore']; 

$("[data-respond]").each(function() { 
    $this = $(this), 
    data = $this.data("respond"); 
    options = {}; 

    // check we have object 
    /*if(typeof data !== 'object'){ 
     data = eval(data); 
    }*/ 

    if (data.match) { 
     if ($.inArray(data.match.method, allowedMethods) > -1) { 
      options.match = function() { 
       if (data.match.method == 'insertAfter') { 
        if ($this[0] == $(data.match.target).next()[0]) { 
         return; 
        } 
       } 
       if ($(data.match.target).length) { 
        $this[data.match.method](data.match.target); 
       } 
      } 
     } 
    } //match 

    if (data.unmatch) { 
     if (data.unmatch == 'auto') { 
      data.unmatch = {}; 

      // a) insert after      
      if ($this.prev().length) { 
       data.unmatch.target = $this.prev(); 
       data.unmatch.method = 'insertAfter'; 
      } else if ($this.next().length) { 
       // c) insert before 
       data.unmatch.target = $this.next(); 
       data.unmatch.method = 'insertBefore'; 
      } else { 
       // d) append to parent 
       data.unmatch.target = $this.parent(); 
       data.unmatch.method = 'appendTo'; 
      } 

      if ($.inArray(data.unmatch.method, allowedMethods) > -1) { 
       options.unmatch = function() { 
        $this[data.unmatch.method](data.unmatch.target); 
       } 
      } 
     } else { 
      // Manually set unmatch 
      if ($.inArray(data.unmatch.method, allowedMethods) > -1) { 
       options.unmatch = function() { 
        if ($(data.unmatch.target).length) { 
         $this[data.unmatch.method](data.unmatch.target); 
        } 
       } 
      } 
     } 

    } //unmatch 

    enquire.register(data.query, options); 
}); 

Jsbin - http://jsbin.com/akAV/1/edit

Answer 1

원래 위치를 기억하고 미디어 쿼리 외부에있을 때 자동으로 요소를 되돌리려합니다.

그러나 이전에 참조했던 prev/next 요소도 이동하는 문제가 있습니다.

일반적인 설명 : "원본 컨텍스트"가 더 이상 존재하지 않을 때 "원래 위치"가 무엇인지 명확하게 정의해야합니다.

---

나는 문제 중 하나는 당신이 참조로 이동하는 요소에 사용할 생각합니다.

은 아마 당신은 이동하기 전에 빈 (고정) HTML 태그를 남길 수 있습니다 : 내가 firbug에 cheked 때

// create an empty tag, which will be left at the "original position" 
var $beacon = $('<span class="beacon"></span>'); 
$(this).after($beacon); 
// keep a reference to this node 
$(this).data('unmatch-beacon', $beacon[0]); 

// the unmatch function would be something like : 
data.unmatch = function(){ 
    var beacon = $(this).data('unmatch-beacon'); 
    $(beacon).after(this); 
    $(beacon).remove(); 
    $(this).data('unmatch-beacon', null); 
}; 

Answer 2

내 첫번째 생각은 실제로 매우 간단 하나입니다. 왜 당신이 그들을 원할 때 포장하지 않을까요? 당신이 뭔가를 추가 할 위치

// a) insert after      
if($this.prev().length){ 
    data.unmatch.target = $('.firstWrapper'); 
    data.unmatch.method = 'appendTo'; 
} else if($this.next().length){ 
// c) insert before 
    data.unmatch.target = $('.secondWrapper'); 
    data.unmatch.method = 'appendTo'; 
} else { 
// d) append to parent 
    data.unmatch.target = $('.parentContainer'); 
    data.unmatch.method = 'appendTo'; 
} 

이 발견하기가 아주 쉽게 만들 것입니다 :

<div class="parentContainer"> 
    <div class="firstWrapper"> 
     <!-- Content that you want to move goes here --> 
    </div> 
    <div class="secondWrapper"> 
     <!-- Second content that you want to move goes here --> 
    </div> 
</div> 

그리고 당신의 JS는 무언가 같이해야합니다. 단순하게 유지하십시오! :)

/J.