mx-dragselect

默认示例

HTML Code:
<ul mx-view="mx-dragselect/index" class="hor fl" mx-change="show()" mx-dragbegin="begin()" mx-dragfinish="end()">
    <li>123</li>
    <li>456</li>
    <li>123</li>
    <li>456</li>
    <li>123</li>
    <li>456</li>
    <li>123</li>
    <li>456</li>
</ul>
Javascript Code:
let Magix = require('magix');
let $ = require('$');
Magix.applyStyle('@index.less');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    render() {
        let me = this;
        me.updater.digest();
        me.$selected = {};
    },
    'show<change>'(e) {
        let node = e.node;
        let me = this;
        if (!node.id) node.id = Magix.guid('mx_');
        if (e.action == 'add') {
            if (me.$selected[node.id]) {
                $(node).css({
                    opacity: 1
                });
                delete me.$selected[node.id];

                me.$temp[node.id] = 1;
            } else {
                $(node).css({
                    opacity: 0.1
                });
                me.$selected[node.id] = node;
                delete me.$temp[node.id];
            }
        } else if (e.action == 'remove') {
            if (me.$temp[node.id]) {
                $(node).css({
                    opacity: 0.1
                });
                me.$selected[node.id] = node;
                delete me.$temp[node.id];
            } else {
                $(node).css({
                    opacity: 1
                });
                delete me.$selected[node.id];
                me.$temp[node.id] = 1;
            }
        }
        console.log(me.$selected);
    },
    'begin<dragbegin>'() {
        this.$temp = {};
    },
    'end<dragfinish>'() {
        delete this.$temp;
    }
});
    

部分不能选择

HTML Code:
<ul mx-view="mx-dragselect/index" class="hor fl" mx-change="show()" mx-dragbegin="begin()" mx-dragfinish="end()" view-selector="li[select!=false]">
        <li>123</li>
        <li>456</li>
        <li>123</li>
        <li>456</li>
        <li>123</li>
        <li>456</li>
        <li select="false">123</li>
        <li select="false">456</li>
    </ul>