Tôi đang cố gắng tạo một phần tử có tên là bộ chia lõi không được dùng nữa trong phiên bản 1.0 vì nó đóng một vai trò quan trọng trong dự án của chúng tôi.

Nếu bạn không biết bộ chia lõi làm gì, tôi có thể cung cấp một mô tả ngắn gọn. core-splitter cung cấp một thanh chia. Kéo thanh chia sẽ điều chỉnh kích thước của các phần tử anh chị em. Thông thường, bạn sẽ muốn sử dụng bộ chia lõi với bố cục linh hoạt để các phần tử anh chị em khác có thể được sử dụng linh hoạt. Thật không may, tính năng này chỉ hoạt động ở Polymer 0,5 nhưng không được dùng ở 1.0. Đây là bản demo của phiên bản Polymer 0.5. Bản trình diễn bộ chia lõi trong Polymer 0.5

Tôi có thể thực hiện việc này bằng javascript đơn giản nhưng không thể làm cho nó hoạt động trong Polymer 1.0.

đây là mộtvĩ cầm

    
      
        
Thịt lợn xông khói ipsum dolor amet sườn bò thịt thăn picanha thăn lợn sườn lợn xúc xích thịt xông khói thịt bò thăn turducken gà t-bone.

        

        
Thịt bò andouille viên tròn dăm bông thăn tròn ba đầu ribeye xương t-bone, lưỡi lợn thăn gà tây sườn lợn Kielbasa doner picanha turducken, thịt xông khói thịt lợn pastrami. andouille.

      
     
    .gutter {
       màu nền: #eee;
       hình nền: url('../../../ui/v1/icons/mail/grippy_large.png');
       lặp lại nền: không lặp lại;
       vị trí nền: 50%;
       con trỏ: di chuyển;
       con trỏ: lấy;
       con trỏ: -moz-grab;
       con trỏ: -webkit-grab;
    }
  .split, .gutter {
      chiều cao: 100%;
      nổi: trái;
  }
.gutter:hoạt động {
    con trỏ: chộp lấy;
    con trỏ: -moz-grabbing;
    con trỏ: -webkit-lấy;
 }
.tách ra {
    kích thước hộp: hộp viền;
    phần đệm: 20px;
    tràn-y: cuộn;
    tràn-x: ẩn;
}
  
  
  Polyme({
    là: 'phần tử bộ chia',
    của cải:{
      "kéo":{
       Giá trị: sai
     }
    },
    "split":function(ids, options){
    tùy chọn = tùy chọn loại !== 'không xác định' tùy chọn : {};

    if (!options.gutterWidth) options.gutterWidth = 10;
    if (!options.minWidth) options.minWidth = 100;
    if (!options.snapOffset) options.snapOffset = 30;

  // Trình xử lý sự kiện dành cho các sự kiện kéo, được liên kết với một đối tượng cặp.
  // Lưu vị trí và chiều rộng bên trái của cặp khi bắt đầu kéo.
  // Ngăn lựa chọn khi bắt đầu và kích hoạt lại nó khi hoàn tất.

    var startDragging = function (e) {
        console.log('start');
        e.preventDefault();

         this.kéo = true;

        this.width = this.left.clientWidth + this.right.clientWidth + options.gutterWidth;
        this.x = this.left.getBoundingClientRect().left;

        this.left.addEventListener('selectstart', PreventSelection);
        this.left.addEventListener('dragstart', PreventSelection);
        this.right.addEventListener('selectstart', PreventSelection);
        this.right.addEventListener('dragstart', PreventSelection);

        this.left.style.userSelect = 'none';
        this.left.style.webkitUserSelect = 'none';
        this.left.style.MozUserSelect = 'none';

        this.right.style.userSelect = 'none';
        this.right.style.webkitUserSelect = 'none';
        this.right.style.MozUserSelect = 'none';

        if (options.onDragStart) {
            tùy chọn.onDragStart();
        }
    },

    stopDragging = hàm () {
        this.kéo = sai;

        this.left.removeEventListener('selectstart', PreventSelection);
        this.left.removeEventListener('dragstart', PreventSelection);
        this.right.removeEventListener('selectstart', PreventSelection);
        this.right.removeEventListener('dragstart', PreventSelection);

        this.left.style.userSelect = '';
        this.left.style.webkitUserSelect = '';
        this.left.style.MozUserSelect = '';

        this.right.style.userSelect = '';
        this.right.style.webkitUserSelect = '';
        this.right.style.MozUserSelect = '';

        if (options.onDragEnd) {
            tùy chọn.onDragEnd();
        }
    },

    kéo = hàm (e) {
        if (!this.dragging) trả về;

        // Lấy vị trí tương đối của sự kiện từ phía bên trái của
        // cặp.

        var offsetX = e.clientX - this.x;

        // Nếu trong snapOffset tối thiểu hoặc tối đa, đặt offset thành tối thiểu hoặc tối đa

        if (offsetX <= this.leftMin + options.snapOffset) {
            offsetX = this.leftMin;
        } else if (offsetX >= this.width - this.rightMin - options.snapOffset) {
            offsetX = this.width - this.rightMin;
        }

        // Chiều rộng bên trái giống với chiều rộng bên phải là tổng chiều rộng - chiều rộng bên trái.

        this.left.style.width = 'calc(' + (offsetX / this.width * 100) + '% - ' + options.gutterWidth / 2 + 'px)';
        this.right.style.width = 'calc(' + (100 - (offsetX / this.width * 100)) + '% - ' + options.gutterWidth / 2 + 'px)';

        if (options.onDrag) {
            tùy chọn.onDrag();
        }
    },

    ngăn chặnSelection = function () { return false },

    // Đưa ra danh sách các id phần tử DOM và danh sách độ rộng phần trăm,
    // gán cho mỗi phần tử một chiều rộng cho phép có một máng xối giữa mỗi phần tử
    // cặp. Số lượng gutter là ids.length - 1, và tổng số gutter
    // chiều rộng là gutterWidth * (ids.length - 1).
    // mỗi chiều rộng, trừ đi tổng chiều rộng của gutter cho chiều rộng cha.

    parent = document.getElementById(ids[0]).parentNode;

if (!options.widths) {
    var phần trăm = 100/ids.length;

    tùy chọn.widths = [];

    for (var i = 0; i < ids.length; i++) {
        tùy chọn.widths.push(phần trăm);
    };
}

if (!Array.isArray(options.minWidth)) {
    var minWidths = [];

    for (var i = 0; i < ids.length; i++) {
        minWidths.push(options.minWidth);
    };

    tùy chọn.minWidth = minWidths;
}

for (var i = 0; i < ids.length; i++) {
    var el = document.getElementById(ids[i]);

    nếu (i > 0) {
        cặp var = {
                bên trái: document.getElementById(ids[i - 1]),
                đúng rồi:el,
                leftMin: options.minWidth[i - 1],
                rightMin: options.minWidth[i],
                kéo: sai,
                cha mẹ: cha mẹ
            },
            gutter = document.createElement('div');

        gutter.className = 'máng xối';
        gutter.style.width = options.gutterWidth + 'px';

        gutter.addEventListener('mousedown', startDragging.bind(pair));

        parent.addEventListener('mouseup', stopDragging.bind(pair));
        parent.addEventListener('mousemove', drag.bind(pair));
        parent.addEventListener('mouseleave', stopDragging.bind(pair));

        parent.insertBefore(gutter, el);

        pair.gutter = máng xối;
    }

    el.style.width = 'calc(' + options.widths[i] + '% - ' + options.gutterWidth / 2 + 'px)';
}
  },
  "sẵn sàng":hàm(){
      this.split(['div1', 'div2'], {
        chiều rộng: [25, 75],
        chiều rộng tối thiểu: 200
    });
  }
});

câu trả lời hay nhất

Cập nhật: Tôi đã nâng cấp nhánh bộ chia lõi để hoạt động với Polymer 1.0 http://github.com/JC-Orozco/iron-splitter tương thích

Trả lời:Vấn đề là thành phần polymer phải được giải quyết DOM cục bộThay vì DOM thông thường. Đây là sử dụng cái này.$[] nhận ra hơn làdocument.getElementById()bên cạnh đóPolymer.dom(this.root)thay vìcha mẹ . Tôi đã có thể thực thi mã bằng cách thực hiện thay đổi tiếp theo cho phù hợp:

// parent = document.getElementById(ids[0]).parentNode;
parent = this.$[ids[0]].parentNode;

// var el = document.getElementById(ids[i]);
var el = this.$[ids[i]];

// trái: document.getElementById(ids[i - 1]),
trái: this.$[ids[i - 1]],

//parent.insertBefore(gutter, el);
Polymer.dom(this.root).insertBefore(gutter, el);

Tôi cũng đã nhận xét div gutter trong phần mẫu vì khi tạo gutter trong mã javascript, nó sẽ lặp lại:

Tôi đã sử dụng máy chủ cục bộ có cài đặt Polymer 1.0 từ https://github.com/Polymer/polymer và hai tệp tiếp theo trong thư mục phần tử bộ chia.

demo.html:

<đầu>
  
  

  

  

  
    .container {
      chiều cao: 240px;
      đường viền: 4px liền khối #aaa;
    }