將元素移回到原始位置

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標記：

// 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

我最初的想法其實是一個很簡單的一個。爲什麼不把它們包裝在你想要的地方？

<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應該是這樣的：

// 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'; 
} 

這將使它很容易找到要添加一些東西。把事情簡單化！ :)

/J。