UNPKG

magix-components

Version:

magix组件

github.com/magix-components/magix-components

magix-components/magix-components

1 lines • 11.2 kB

JavaScript

define("mx-dragsort/__test__/index",["magix","../index"],function(l,t,a){l("../index");var e=l("magix");e.applyStyle("d",".aK{width:300px;cursor:default}.aK li{line-height:30px;padding:10px}.aK li:nth-child(odd){background-color:rgba(172,236,182,.5)}.aK span{cursor:move;margin-right:10px;display:inline-block;height:100%}.aL{background:#f8f6f6;height:120px;overflow:auto;width:500px}.aM,.aL{cursor:default}.aM{width:100%}.aM li{width:100px;height:60px;text-align:center;float:left;line-height:60px;background:#f8f6f6;border-right:1px solid #fff}.aM li[ds-draggable=false]{background:#ccc}"),a.exports=e.View.extend({tmpl:{html:'<h2>mx-dragsort</h2><h3>默认示例</h3><div class="B ag"><ul mx-view="mx-dragsort/index?selector=span" class="aK Z"><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="a_"><table class="ay az"><thead><tr><th><input type="checkbox" class="aq" linkage="example1"></th><%for(var a=0;a<5;a++){%><th>示例字段<%=a%></th><%}%></tr></thead><tbody mx-view="mx-dragsort/index"><%for(var b=0;b<10;b++){%><tr><td><input type="checkbox" class="aq" linkage-parent="example1" value="ex1_<%=b%>"></td><%for(var c=0;c<5;c++){%><td><%=b%>示例字段内容<%=c%></td><%}%></tr><%}%></tbody></table></div></div><div class="B"><div>HTML Code:</div><pre><ul mx-view="app/gallery/mx-dragsort/index" class="left fl" view-selector="span">\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n</ul>\n<div class="fr">\n <table class="table table-striped">\n <thead>\n <tr>\n <th><input type="checkbox" class="checkbox" linkage="example1" /></th>\n <%for(var i=0;i<5;i++){%>\n <th>示例字段<%=i%></th>\n <%}%>\n </tr>\n </thead>\n <tbody mx-view="app/gallery/mx-dragsort/index">\n <%for(var i=0;i<10;i++){%>\n <tr>\n <td><input type="checkbox" class="checkbox" linkage-parent="example1" value="ex1_<%=i%>" /></td>\n <%for(var j=0;j<5;j++){%>\n <td><%=i%>示例字段内容<%=j%></td>\n <%}%>\n </tr>\n <%}%>\n </tbody>\n </table>\n</div></pre></div><h3 class="f">水平拖动</h3><div class="B ag"><ul mx-view="mx-dragsort/index?horizonal=true&vertical=false" class="aM Z"><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><div class="B"><div>HTML Code:</div><pre><ul mx-view="app/gallery/mx-dragsort/index" class="hor fl" view-horizonal="true" view-vertical="false">\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n</ul></pre></div><h3 class="f">四个方向</h3><div class="B ag"><ul mx-view="mx-dragsort/index?horizonal=true&vertical=true" class="aM Z"><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><div class="B"><div>HTML Code:</div><pre><ul mx-view="app/gallery/mx-dragsort/index" class="hor fl" view-horizonal="true" view-vertical="true">\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n</ul></pre></div><h3 class="f">滚动容器和窗口</h3><h4>拖动的容器节点如果可以滚动，则会自动滚动，如果拖动靠近窗口，则会自动滚动窗口</h4><div class="B ag"><ul mx-view="mx-dragsort/index?selector=span" class="aK aL Z ai"><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><h3 class="f">跨容器拖动</h3><div class="B ag"><ul mx-view="mx-dragsort/index?drops=_def&selector=span" class="aK aL Z ai" 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?selector=span&drops=_abc" class="aK aL Z ai x" id="_def"></ul></div><div class="B"><div>HTML Code:</div><pre><ul mx-view="app/gallery/mx-dragsort/index" class="left left1 fl scrollable" view-drops="_def" view-selector="span" id="_abc">\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n</ul>\n<ul mx-view="mx-dragsort/index" class="left left1 fl scrollable ml30" id="_def" view-selector="span" view-drops="_abc">\n</ul></pre></div><h3 class="f">拖出容器删除</h3><div class="B ag"><ul mx-view="mx-dragsort/index?sort=false" class="aK aL Z ai" mx-enterzone="stop()" mx-leavezone="ok()" mx-dragfinish="del()"><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><div class="B"><div>HTML Code:</div><pre><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">\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n</ul></pre><div class="z">Javascript Code:</div><pre>let Magix = require(\'magix\');\nMagix.applyStyle(\'@index.less\');\nmodule.exports = Magix.View.extend({\n tmpl: \'@index.html\',\n render() {\n let me = this;\n me.updater.digest();\n },\n \'stop<enterzone>\'(e) {\n e.changePointer(false);\n },\n \'ok<leavezone>\'(e) {\n e.changePointer(true);\n },\n \'del<dragfinish>\'(e) {\n if (e.moved && e.outZone) {//moved and outside zone\n $(e.dragNode).slideUp();\n setTimeout(() => {\n e.dragZone.removeChild(e.dragNode);\n }, 500);\n }\n }\n});</pre></div><h3 class="f">部分不能拖动及排序</h3><div class="B ag"><ul mx-view="mx-dragsort/index?horizonal=true&vertical=false" class="aM Z"><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></div><div class="B"><div>HTML Code:</div><pre><ul mx-view="app/gallery/mx-dragsort/index" class="hor fl" view-horizonal="true" view-vertical="false">\n <li ds-draggable="false"><span>move</span>123</li>\n <li ds-draggable="false"><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li><span>move</span>456</li>\n <li><span>move</span>123</li>\n <li ds-draggable="false"><span>move</span>456</li>\n</ul></pre></div><h3 class="f">drag and drop</h3><div class="B ag"><ul class="aM Z"><li ds-draggable="false"><span>move</span>123</li><li ds-draggable="false"><span>move</span>456</li><li draggable="true" mx-dragstart="start()"><span>move</span>123</li><li draggable="true" mx-dragstart="start()"><span>move</span>456</li><li draggable="true" mx-dragstart="start()"><span>move</span>123</li><li draggable="true" mx-dragstart="start()"><span>move</span>456</li><li draggable="true" mx-dragstart="start()"><span>move</span>123</li><li ds-draggable="false"><span>move</span>456</li></ul><div style="width:300px;height:300px;border:solid 1px #ccc" mx-drop="drop()" mx-dragenter="enter()" mx-dragleave="leave()">drop here</div></div>',subs:[]},render:function(){this.updater.digest()},"stop<enterzone>":function(l){l.changePointer(!1)},"ok<leavezone>":function(l){l.changePointer(!0)},"del<dragfinish>":function(l){l.moved&&l.outZone&&($(l.dragNode).slideUp(),setTimeout(function(){l.dragZone.removeChild(l.dragNode)},500))},"start<dragstart>":function(l){l.originalEvent.dataTransfer.effectAllowed="none",l.originalEvent.dataTransfer.setDragImage(l.target,-10,-18)},"drop<drop>":function(l){$(l.eventTarget).css({borderColor:"#ccc"})},"enter<dragenter>":function(l){$(l.eventTarget).css({borderColor:"red"})},"leave<dragleave>":function(l){$(l.eventTarget).css({borderColor:"#ccc"})},"$doc<dragover>":function(l){l.preventDefault()}})});