'addfunction'

src/css/main.css

@@ -49,6 +49,7 @@
   box-sizing: border-box;
   margin: 0;
   position: absolute;
+  overflow-y: hidden;
 }
 .page-selection .page-selection-body .border-selection .border-main .question-selection .question-selection-title .sort, .page-selection .page-selection-body .border-selection .border-main .question-selection .question-selection-title .edit-title, .page-selection .page-selection-body .border-selection .border-main .question-selection .question-selection-title .score {
   display: inline-block;

src/css/style.css

@@ -43,7 +43,6 @@
   color: rgb(103, 103, 103);
   line-height: 1;
   width: 100%;
-  user-select: none;
   background: none;
   padding: 0;
   transition: padding 0.5s;
@@ -54,6 +53,9 @@
   transform: translate3d(0px, 0px, 0px) rotateZ(0deg);
   opacity: 1;
 }
+.outer-box div{
+  box-sizing: border-box;
+}
 .element-box-contents.unedite{
   pointer-events: none;
 }

src/js/box/boxContent.js

@@ -4,21 +4,31 @@
  * Description:
  */
 var boxContent = function(style) {
-  this.top =  (style && style.top) || '10px';
-  this.left = (style && style.left) || '10px';
-  this.width = (style && style.width) || '310px';
-  this.height = (style && style.height) || '50px';
-  this.isEditor = (style && style.isEditor) || false;
+  this.top =  (style && style.top) || '10';
+  this.left = (style && style.left) || '10';
+  this.width = (style && style.width) || '310';
+  this.height = (style && style.height) || '50';
+  this.isEditor = false;
+
+  this.ox = 0;
+  this.oy = 0;
 
   //组件id名称
   this.domId = ('syq_box_' + Math.random()).replace('.','_');
-
   //一个实例化的dom
   this.vdom = null;
-
   //组件当中的所有html
   this.editorContent = null;
 
+  this.drag = false;
+  this.smove = false;
+  this.nmove = false;
+  this.wmove = false;
+  this.emove = false;
+  this.nwmove = false;
+  this.swmove = false;
+  this.semove = false;
+
 };
 
 boxContent.prototype.boxTpl = '<div class="line-n line resizable"><div class="circle"></div></div><div class="line-e line resizable"><div class="circle"></div></div><div class="line-s line resizable"><div class="circle"></div></div><div class="line-w line resizable"><div class="circle"></div></div><div class="circle-nw circle resizable"></div><div class="circle-ne circle resizable"></div><div class="circle-se circle resizable"></div><div class="circle-sw circle resizable"></div>';
@@ -27,23 +37,264 @@ boxContent.prototype.boxTpl = '<div class="line-n line resizable"><div class="ci
 //由数据渲染层dom
 boxContent.prototype.renderToDom = function() {
   this.vdom = $('<div class="outer-box" id="' + this.domId +'"></div>');
-  this.vdom.css({ width: this.width, height: this.height,top: this.top, left: this.left });
+  this.vdom.css({ width: this.width, 'min-height': this.height,top: this.top, left: this.left });
   this.renderBoxDom();
 };
 
 //组件渲染
 boxContent.prototype.renderBoxDom = function() {
-  let elementBoxDom = $('<div class="element-box-contents"></div>');
-  let editorDom = $('<div class="element comp_paragraph editable-text"></div>');
+  let editorDom = $('<div class="element comp_paragraph editable-text" contenteditable="true"></div>');
   let circleDom = $('<div class="eqc-select"></div>');
   editorDom.text('双击此处进行编辑');
   if(this.editorContent)editorDom.html(this.editorContent);
-  editorDom.css({ width: this.width, height: this.height, 'pointer-events': this.isEditor ? 'all' : 'none' });
-  elementBoxDom.append(editorDom);
+  editorDom.css({ 'pointer-events': this.isEditor ? 'all' : 'none' });
   circleDom.append(this.boxTpl);
-
-  this.vdom.append(elementBoxDom);
+  this.vdom.append(editorDom);
   this.vdom.append(circleDom);
+  this.bindDragEvent(this.vdom);
+  this.bindEditorEvent(this.vdom);
+  //以下是各个方向的拖拽
+  this.bindMoveSEvent(this.vdom);
+};
+
+//拖动属性
+boxContent.prototype.bindDragEvent = function (el) {
+  let _this = this;
+  el.on('mousedown' , function(e) {
+    let $this = $(this);
+    _this.ox = e.pageX;//原始x位置
+    _this.oy = e.pageY;
+    _this.top = parseInt($this.css('top').replace('px', ''));
+    _this.left = parseInt($this.css('left').replace('px', ''));
+    _this.drag = true;
+  });
+  el.on('mousemove', function (e) {
+    if(_this.drag){
+      let x = e.pageX - _this.ox;
+      let y = e.pageY - _this.oy;
+      $(this).css({
+        left: _this.left + x,
+        top: _this.top + y,
+        opacity: .5
+      });
+    }
+  }).on('mouseup',function(e){
+    _this.drag = false;
+    $(this).css('opacity',1);
+  });
+
 };
 
+//朝南方向拖拽
+boxContent.prototype.bindMoveSEvent = function(el) {
+  let _this = this;
+  el.on('mousedown','.line-s, .line-s .circle', function(e){
+    _this.oy = e.pageY;//原始x位置
+    _this.height = el.height();
+    _this.smove = true;
+    el.on('mousemove','.line-s, .line-s .circle', function(e){
+      if(_this.smove){
+        let y = (e.pageY - parseInt(_this.oy));
+        _this.vdom.css({
+          height: parseInt(_this.height) + y
+        }).find('.editable-text').css({
+          height: parseInt(_this.height) + y
+        })
+      }
+    })
+      .on('mouseup', function(){
+      _this.smove = false;
+      $(this).off('mousemove');
+    });
+  });
+};
+
+//朝北方向
+boxContent.prototype.bindMoveNEvent = function(el) {
+  let _this = this;
+  el.on('mousedown','.line-n, .line-n .circle', function(e){
+    _this.oy = e.pageY;//原始x位置
+    _this.height = el.height();
+    _this.top = parseInt(_this.vdom.css('top').replace('px', ''));
+    _this.nmove = true;
+    el.on('mousemove','.line-n, .line-n .circle', function(e){
+      if(_this.nmove){
+        let y = (e.pageY - parseInt(_this.oy));
+        _this.vdom.css({
+          height: _this.height - y,
+          top: _this.top + y
+        }).find('.editable-text').css({
+          height: _this.height - y
+        })
+      }
+    })
+      .on('mouseup', function(){
+        _this.nmove = false;
+        $(this).off('mousemove');
+      });
+  });
+};
+
+//朝西方向
+boxContent.prototype.bindMoveWEvent = function(el) {
+  let _this = this;
+  el.on('mousedown','.line-w, .line-w .circle', function(e){
+    _this.oy = e.pageX;//原始x位置
+    _this.width = el.width();
+    _this.wmove = true;
+    _this.left = parseInt(_this.vdom.css('left').replace('px', ''));
+    el.on('mousemove','.line-w, .line-w .circle', function(e){
+      if(_this.wmove){
+        let x = (e.pageX - parseInt(_this.ox));
+        _this.vdom.css({
+          width: _this.width - x,
+          left: _this.left + x
+        }).find('.editable-text').css({
+          width: _this.width - x
+        })
+      }
+    })
+      .on('mouseup', function(){
+        _this.wmove = false;
+        $(this).off('mousemove');
+      });
+  });
+};
+
+// 朝东方向
+boxContent.prototype.bindMoveEEvent = function (el) {
+  let _this = this;
+  el.on('mousedown','.line-e, .line-e .circle', function(e){
+    _this.oy = e.pageX;//原始x位置
+    _this.width = el.width();
+    _this.emove = true;
+    el.on('mousemove','.line-e, .line-e .circle', function(e){
+      if(_this.emove){
+        let x = (e.pageX - parseInt(_this.ox));
+        _this.vdom.css({
+          width: parseInt(_this.width) + x,
+        }).find('.editable-text').css({
+          width: parseInt(_this.width) - x
+        })
+      }
+    })
+      .on('mouseup', function(){
+        _this.emove = false;
+        $(this).off('mousemove');
+      });
+  });
+};
+
+// 朝西北
+boxContent.prototype.bindMoveNWEvent = function (el) {
+  let _this = this;
+  el.on('mousedown','.circle-nw',function(e){
+    _this.ox = e.pageX;//原始x位置
+    _this.oy = e.pageY;
+    _this.width = _this.vdom.width();
+    _this.height = _this.vdom.height();
+    _this.top = parseInt(_this.vdom.css('top').replace('px', ''));
+    _this.left = parseInt(_this.vdom.css('left').replace('px', ''));
+    _this.nwmove = true;
+
+    el.on('mousemove','.circle-nw', function(e){
+      if(_this.nwmove){
+        let x = e.pageX - _this.ox;
+        let y = e.pageY - _this.oy;
+        el.css({
+          height: _this.height - y,
+          // top: otop + y,
+          width: _this.width - x,
+          // left: oleft + x
+        });
+        _this.vdom.css({
+          height: _this.height - y,
+          top: _this.top + y,
+          width: _this.width - x,
+          left: _this.left + x
+        });
+      }
+    })
+      .on('mouseup', function(){
+        _this.nwmove = false;
+        $(this).off('mousemove');
+      });
+  });
+};
+
+// 朝西南
+boxContent.prototype.bindMoveNWEvent = function (el) {
+  let _this = this;
+  el.on('mousedown','.circle-nw',function(e){
+    _this.ox = e.pageX;//原始x位置
+    _this.oy = e.pageY;
+    _this.width = _this.vdom.width();
+    _this.height = _this.vdom.height();
+    _this.left = parseInt(_this.vdom.css('left').replace('px', ''));
+    _this.swmove = true;
+
+    el.on('mousemove','.circle-nw', function(e){
+      if(_this.swmove){
+        let x = e.pageX - _this.ox;
+        let y = e.pageY - _this.oy;
+        el.css({
+          height: _this.height + y,
+          width: _this.width - x,
+        });
+        _this.vdom.css({
+          height: _this.height + y,
+          width: _this.width - x,
+          left: _this.left + x
+        });
+      }
+    })
+      .on('mouseup', function(){
+        _this.swmove = false;
+        $(this).off('mousemove');
+      });
+  });
+};
+
+//朝东南
+boxContent.prototype.bindMoveSEEvent = function (el){
+  let _this = this;
+  el.on('mousedown','.circle-se',function(e){
+    _this.ox = e.pageX;//原始x位置
+    _this.oy = e.pageY;
+    _this.width = _this.vdom.width();
+    _this.height = _this.vdom.height();
+    _this.semove = true;
+
+    el.on('mousemove','.circle-se', function(e){
+      if(_this.semove){
+        let x = e.pageX - _this.ox;
+        let y = e.pageY - _this.oy;
+        el.css({
+          height: _this.height + y,
+          width: _this.width + x,
+        });
+        _this.vdom.css({
+          height: _this.height + y,
+          width: _this.width + x,
+        });
+      }
+    })
+      .on('mouseup', function(){
+        _this.semove = false;
+        $(this).off('mousemove');
+      });
+  });
+};
+
+
+boxContent.prototype.bindEditorEvent = function(el) {
+  el.on('dblclick', function(e) {
+    let child = e.target.children[0] || e.target;
+    $(this).find('.comp_paragraph').css('pointer-events','all').select();
+    let range = window.getSelection();// 创建range
+    range.selectAllChildren(child);// range 选择obj下所有子内容
+  });
+};
+
+
 export default boxContent;

src/js/box/yzComponents.js

@@ -1,7 +1,8 @@
 import boxContent from './boxContent';
 let yzComponent = function (cfg) {
   this.parentDom = cfg.content;
-  this.boxes = [];
+  this.boxes = cfg.boxes || [];
+  this.boxDom = [];
 };
 
 yzComponent.prototype.addComponent = function () {
@@ -12,7 +13,20 @@ yzComponent.prototype.addComponent = function () {
 };
 
 yzComponent.prototype.renderDom = function() {
-    console.log(123);
+  let len = this.boxes.length;
+  for(let i = 0;i<len;i++){
+    let box = new boxContent(this.boxes[i]);
+    box.renderToDom();
+    this.parentDom.append(box.vdom);
+    this.boxes.push(box);
+  }
 };
 
+yzComponent.prototype.getBoxes = function() {
+  return JSON.stringify(this.boxes);
+};
+
+yzComponent.prototype.setContent = function (content)  {
+  this.parentDom = content;
+};
  export default yzComponent;

src/js/main2.js

@@ -317,7 +317,6 @@ pageManager.prototype.renderToDom = function () {
   $('body').on('getQuestion', (e,pageNum,content) => {
     this.refreshToolBar(...[pageNum,content]);
   });
-  console.log(pages);
 };
 
 /**
@@ -331,11 +330,35 @@ pageManager.prototype._refreshPage = function () {
   for (let i in pages) {
     let doms = pages[i].doms;
     for (let j in doms) {
+      let questions = [];
+      for(let k in doms[j].questionsDom) {
+        let questionItem = doms[j].questionsDom[k];
+        let questionTemp = {
+          border: questionItem.border,
+          content: questionItem.content ? questionItem.content.getBoxes() : null,
+          inDetail: questionItem.inDetail,
+          isSubject: questionItem.isSubject,
+          minHeight: questionItem.minHeight,
+          needMark: questionItem.border,
+          pNum: questionItem.pNum,
+          pageNo: questionItem.pageNo,
+          problemId: questionItem.problemId,
+          questionId: questionItem.questionId,
+          rectNo: questionItem.rectNo,
+          score: questionItem.score,
+          sort: questionItem.sort,
+          title: questionItem.title,
+          isSubQuestion: questionItem.isSubQuestion
+        };
+        if(questionItem['blockindex']) questionTemp['blockindex'] = questionItem.blockindex;
+        if(questionItem['blocknum']) questionTemp['blocknum'] = questionItem.blocknum;
+        questions.push(questionTemp);
+      }
       let item = {
         border: doms[j].border,
         height: doms[j].height,
         isSubject: doms[j].isSubject,
-        questions: doms[j].questions,
+        questions: questions,
         rectNo: doms[j].rectNo,
         minHeight: doms[j].minHeight,
         content: doms[j].content,

src/js/yzDom.js

@@ -28,11 +28,10 @@ yzDom.prototype._initQustionsDoms = function () {
   let questions = this.questions;
   for (let index in questions) {
     this.questionIndex++;
-
     questions[index].order = this.questionIndex;
     this.questionsDom.push(new yzQuestion(questions[index]));
   }
-}
+};
 
 /** 
  * function 渲染客观题的dom

src/js/yzPage.js

@@ -20,7 +20,6 @@ yzPage.prototype.addDom = function (item) {
   this.index++;
   this.doms.push(new yzDom(item));
   this.gap -= item.height;
-  
 };
 
 /** 

src/js/yzQuestion.js

@@ -15,6 +15,7 @@ let yzQuestion = function (cfg) {
   this.sort = cfg.sort;
   this.title = cfg.title || '';
   this.inDetail = cfg.inDetail;
+  this.needMark = cfg.needMark || 1;
   this.isSubject = cfg.isSubject;
   // 是否是跨栏添加的小问
   this.isSubQuestion = cfg.isSubQuestion || false;
@@ -61,6 +62,11 @@ yzQuestion.prototype._renderCommonDom = function () {
   let content = $('<div id="'+ this.domId +'_content" class="question-selection-content"></div>');
   content.css({height: (this.minHeight - 20) + 'px'});
   if (this.content) {
+    let box = JSON.parse(this.content);
+    this.content = new components({
+      content: content,
+      boxes: box
+    });
     this.content.renderDom();
   } else {
     this.content = new components({
@@ -69,7 +75,7 @@ yzQuestion.prototype._renderCommonDom = function () {
   }
   this.vdom.append(content);
   // 冒泡监听事件
-  this.vdom.on('click', ()=>{
+  this.vdom.on('mousedown', (e)=>{
     // 将题目和domId冒泡到顶层
     this.vdom.trigger('getQuestion',[this.pNum,this.content]);
   });

src/js/yzToolbar.js

@@ -74,12 +74,11 @@ yzToolbar.prototype.setSubjectTitle = function(pNum,content) {
   });
 };
 
-yzToolbar.prototype.addComponent = function(dom) {
+yzToolbar.prototype.addComponent = function() {
   if(this.subjectNum == 'none' || !this.subjectNum){
     alert('请选择主观题');return;
   }
-  console.log(this.currentContent);
-  this.currentContent.addComponent(1);
+  this.currentContent.addComponent();
 };
 
 export default yzToolbar;