mx-dragsort

默认示例

<%for(var i=0;i<5;i++){%> <%}%> <%for(var i=0;i<10;i++){%> <%for(var j=0;j<5;j++){%> <%}%> <%}%>
示例字段<%=i%>
<%=i%>示例字段内容<%=j%>
HTML Code:
<ul mx-view="app/gallery/mx-dragsort/index" class="left fl" view-selector="span">
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
</ul>
<div class="fr">
    <table class="table table-striped">
        <thead>
            <tr>
                <th><input type="checkbox" class="checkbox" linkage="example1" /></th>
                <%for(var i=0;i<5;i++){%>
                <th>示例字段<%=i%></th>
                <%}%>
            </tr>
        </thead>
        <tbody mx-view="app/gallery/mx-dragsort/index">
            <%for(var i=0;i<10;i++){%>
            <tr>
                <td><input type="checkbox" class="checkbox" linkage-parent="example1" value="ex1_<%=i%>" /></td>
                <%for(var j=0;j<5;j++){%>
                <td><%=i%>示例字段内容<%=j%></td>
                <%}%>
            </tr>
            <%}%>
        </tbody>
    </table>
</div>

水平拖动

HTML Code:
<ul mx-view="app/gallery/mx-dragsort/index" class="hor fl" view-horizonal="true" view-vertical="false">
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
</ul>

四个方向

HTML Code:
<ul mx-view="app/gallery/mx-dragsort/index" class="hor fl" view-horizonal="true" view-vertical="true">
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
</ul>

滚动容器和窗口

拖动的容器节点如果可以滚动，则会自动滚动，如果拖动靠近窗口，则会自动滚动窗口

跨容器拖动

HTML Code:
<ul mx-view="app/gallery/mx-dragsort/index" class="left left1 fl scrollable" view-drops="_def" view-selector="span" id="_abc">
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
</ul>
<ul mx-view="mx-dragsort/index" class="left left1 fl scrollable ml30" id="_def" view-selector="span" view-drops="_abc">
</ul>

拖出容器删除

HTML Code:
<ul mx-view="app/gallery/mx-dragsort/index" class="left left1 fl scrollable" mx-enterzone="stop()" mx-leavezone="ok()" mx-dragfinish="del()" view-sort="false">
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
</ul>
Javascript Code:
let Magix = require('magix');
Magix.applyStyle('@index.less');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    render() {
        let me = this;
        me.updater.digest();
    },
    'stop<enterzone>'(e) {
        e.changePointer(false);
    },
    'ok<leavezone>'(e) {
        e.changePointer(true);
    },
    'del<dragfinish>'(e) {
        if (e.moved && e.outZone) {//moved and outside zone
            $(e.dragNode).slideUp();
            setTimeout(() => {
                e.dragZone.removeChild(e.dragNode);
            }, 500);
        }
    }
});

部分不能拖动及排序

HTML Code:
<ul mx-view="app/gallery/mx-dragsort/index" class="hor fl" view-horizonal="true" view-vertical="false">
    <li ds-draggable="false"><span>move</span>123</li>
    <li ds-draggable="false"><span>move</span>456</li>
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
    <li><span>move</span>123</li>
    <li><span>move</span>456</li>
    <li><span>move</span>123</li>
    <li ds-draggable="false"><span>move</span>456</li>
</ul>

drag and drop

drop here