|
118 | 118 | }); |
119 | 119 |
|
120 | 120 | // INIT |
| 121 | + if (this.settings.sortable) { |
| 122 | + this.initSortable(); |
| 123 | + } |
| 124 | + |
121 | 125 | this.$el.addClass('query-builder'); |
122 | 126 | this.addGroup(this.$el); |
123 | 127 | }; |
|
127 | 131 | onAfterAddGroup: null, |
128 | 132 | onAfterAddRule: null, |
129 | 133 |
|
| 134 | + sortable: false, |
130 | 135 | filters: [], |
131 | 136 |
|
132 | 137 | lang: { |
|
725 | 730 | this.$el.trigger(e); |
726 | 731 | }; |
727 | 732 |
|
| 733 | + /** |
| 734 | + * Init HTML5 drag and drop |
| 735 | + */ |
| 736 | + QueryBuilder.prototype.initSortable = function() { |
| 737 | + $.event.props.push('dataTransfer'); |
| 738 | + |
| 739 | + var placeholder, isHandle = false; |
| 740 | + |
| 741 | + this.$el.on('mousedown', '.drag-handle', function(e) { |
| 742 | + isHandle = true; |
| 743 | + }); |
| 744 | + this.$el.on('mouseup', '.drag-handle', function(e) { |
| 745 | + isHandle = false; |
| 746 | + }); |
| 747 | + |
| 748 | + this.$el.on('dragstart', '[draggable]', function(e) { |
| 749 | + e.stopPropagation(); |
| 750 | + |
| 751 | + if (isHandle) { |
| 752 | + e.dataTransfer.setData('id', e.target.id); |
| 753 | + |
| 754 | + placeholder = $('<div class="rule-placeholder"> </div>'); |
| 755 | + placeholder.height($(e.target).height()); |
| 756 | + placeholder.insertAfter(e.target); |
| 757 | + |
| 758 | + $(e.target).hide(); |
| 759 | + |
| 760 | + isHandle = false; |
| 761 | + } |
| 762 | + else { |
| 763 | + e.preventDefault(); |
| 764 | + } |
| 765 | + }); |
| 766 | + |
| 767 | + this.$el.on('dragenter', '[draggable]', function(e) { |
| 768 | + e.stopPropagation(); |
| 769 | + |
| 770 | + var target = $(e.target), parent; |
| 771 | + |
| 772 | + parent = target.closest('.rule-container'); |
| 773 | + if (parent.length) { |
| 774 | + placeholder.detach().insertAfter(parent); |
| 775 | + return; |
| 776 | + } |
| 777 | + |
| 778 | + parent = target.closest('.rules-group-container'); |
| 779 | + if (parent.length) { |
| 780 | + placeholder.detach().appendTo(parent.find('.rules-list').eq(0)); |
| 781 | + return; |
| 782 | + } |
| 783 | + }); |
| 784 | + |
| 785 | + this.$el.on('dragover', '[draggable]', function(e) { |
| 786 | + e.preventDefault(); |
| 787 | + e.stopPropagation(); |
| 788 | + }); |
| 789 | + |
| 790 | + this.$el.on('drop', function(e) { |
| 791 | + e.stopPropagation(); |
| 792 | + |
| 793 | + var src = $('#'+ e.dataTransfer.getData('id')), |
| 794 | + target = $(e.target), parent; |
| 795 | + |
| 796 | + parent = target.closest('.rule-container'); |
| 797 | + if (parent.length) { |
| 798 | + src.detach().insertAfter(parent); |
| 799 | + return; |
| 800 | + } |
| 801 | + |
| 802 | + parent = target.closest('.rules-group-container'); |
| 803 | + if (parent.length) { |
| 804 | + src.detach().appendTo(parent.find('.rules-list').eq(0)); |
| 805 | + return; |
| 806 | + } |
| 807 | + }); |
| 808 | + |
| 809 | + this.$el.on('dragend', '[draggable]', function(e) { |
| 810 | + e.stopPropagation(); |
| 811 | + |
| 812 | + var src = $('#'+ e.dataTransfer.getData('id')); |
| 813 | + |
| 814 | + src.show(); |
| 815 | + placeholder.remove(); |
| 816 | + }); |
| 817 | + }; |
| 818 | + |
728 | 819 |
|
729 | 820 | // DATA ACCESS |
730 | 821 | // =============================== |
|
881 | 972 | */ |
882 | 973 | QueryBuilder.prototype.getGroupTemplate = function(group_id) { |
883 | 974 | return '\ |
884 | | -<dl id='+ group_id +' class="rules-group-container"> \ |
| 975 | +<dl id='+ group_id +' class="rules-group-container" '+ (this.settings.sortable ? 'draggable="true"' : '') +'> \ |
885 | 976 | <dt class="rules-group-header"> \ |
886 | | - <div class="btn-group"> \ |
887 | | - <label class="btn btn-xs btn-primary active"><input type="radio" name="'+ group_id +'_cond" value="AND" checked> '+ this.lang.and_condition +'</label> \ |
888 | | - <label class="btn btn-xs btn-primary"><input type="radio" name="'+ group_id +'_cond" value="OR"> '+ this.lang.or_condition +'</label> \ |
889 | | - </div> \ |
890 | 977 | <div class="btn-group pull-right"> \ |
891 | 978 | <button type="button" class="btn btn-xs btn-success" data-add="rule"><i class="glyphicon glyphicon-plus"></i> '+ this.lang.add_rule +'</button> \ |
892 | 979 | <button type="button" class="btn btn-xs btn-success" data-add="group"><i class="glyphicon glyphicon-plus-sign"></i> '+ this.lang.add_group +'</button> \ |
893 | 980 | <button type="button" class="btn btn-xs btn-danger" data-delete="group"><i class="glyphicon glyphicon-remove"></i> '+ this.lang.delete_group +'</button> \ |
894 | 981 | </div> \ |
| 982 | + <div class="btn-group"> \ |
| 983 | + <label class="btn btn-xs btn-primary active"><input type="radio" name="'+ group_id +'_cond" value="AND" checked> '+ this.lang.and_condition +'</label> \ |
| 984 | + <label class="btn btn-xs btn-primary"><input type="radio" name="'+ group_id +'_cond" value="OR"> '+ this.lang.or_condition +'</label> \ |
| 985 | + </div> \ |
| 986 | + '+ (this.settings.sortable ? '<div class="drag-handle"><i class="glyphicon glyphicon-sort"></i></div>' : '') +' \ |
895 | 987 | </dt> \ |
896 | 988 | <dd class=rules-group-body> \ |
897 | 989 | <ul class=rules-list></ul> \ |
|
906 | 998 | */ |
907 | 999 | QueryBuilder.prototype.getRuleTemplate = function(rule_id) { |
908 | 1000 | return '\ |
909 | | -<li id='+ rule_id +' class="rule-container"> \ |
| 1001 | +<li id='+ rule_id +' class="rule-container" '+ (this.settings.sortable ? 'draggable="true"' : '') +'> \ |
910 | 1002 | <div class="rule-header"> \ |
911 | 1003 | <div class="btn-group pull-right"> \ |
912 | 1004 | <button type="button" class="btn btn-xs btn-danger" data-delete="rule"><i class="glyphicon glyphicon-remove"></i> '+ this.lang.delete_rule +'</button> \ |
913 | 1005 | </div> \ |
914 | 1006 | </div> \ |
| 1007 | + '+ (this.settings.sortable ? '<div class="drag-handle"><i class="glyphicon glyphicon-sort"></i></div>' : '') +' \ |
915 | 1008 | <div class="rule-filter-container">'+ this.getRuleFilterSelect(rule_id) +'</div> \ |
916 | 1009 | <div class="rule-operator-container"></div> \ |
917 | 1010 | <div class="rule-value-container"></div> \ |
|
0 commit comments