Question

我使用enquire.js插件来解析存储为data-attributes的媒体查询，这些属性根据浏览器宽度移动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。

将元素移回原始位置

2 个答案: