|  | @@ -402,6 +402,13 @@ $(document).ready(() => {
 | 
	
		
			
				|  |  |          reLoadDetailData();
 | 
	
		
			
				|  |  |      });
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | +    function setdraggrable(){
 | 
	
		
			
				|  |  | +        $( ".img-item" ).draggable({ containment: "parent" },{stop: function( event, ui ) {
 | 
	
		
			
				|  |  | +            }}).resizable({ containment: "parent" },{ handles: 'n, e, s, w, ne, se, sw, nw' },{ maxWidth: parseFloat($('#imgwidth').val())},{maxHeight: parseFloat($('#imgheight').val())},{
 | 
	
		
			
				|  |  | +            stop: function( event, ui ) {
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |      // 草图相关
 | 
	
		
			
				|  |  |      // 移动图片
 | 
	
	
		
			
				|  | @@ -444,20 +451,21 @@ $(document).ready(() => {
 | 
	
		
			
				|  |  |      // 加载草图组成
 | 
	
		
			
				|  |  |      $('#edit-img').on('show.bs.modal', function () {
 | 
	
		
			
				|  |  |          const data = getSelectDetailData();
 | 
	
		
			
				|  |  | -        const items = JSON.parse(data.calc_img_org) || [];
 | 
	
		
			
				|  |  | +        const items = data.calc_img_org !== undefined ? JSON.parse(data.calc_img_org) : [];
 | 
	
		
			
				|  |  |          const html = [];
 | 
	
		
			
				|  |  |          for (const item of items) {
 | 
	
		
			
				|  |  | -            const itemStyle = 'top:' + item.top + ';' + 'left:' + item.left + ';';
 | 
	
		
			
				|  |  | +            const itemStyle = 'top:' + item.top + ';' + 'left:' + item.left + ';' + 'width:' + item.width + ';' + 'height:' + item.height + ';';
 | 
	
		
			
				|  |  |              html.push('<div class="img-item" style="' + itemStyle + '">');
 | 
	
		
			
				|  |  |              html.push('<div class="img-bar">');
 | 
	
		
			
				|  |  |              html.push('<a href="javascript: void(0);" class="text-danger" title="删除"><i class="fa fa-remove"></i></a>');
 | 
	
		
			
				|  |  |              html.push('</div>');
 | 
	
		
			
				|  |  | -            html.push('<img src="', item.src, '" id="draggable">');
 | 
	
		
			
				|  |  | +            html.push('<div class="focus" style="width:100%; height:100%"><img src="', item.src, '" id="draggable" style="width:100%; height:100%"></div>');
 | 
	
		
			
				|  |  |              html.push('</div>');
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  |          $('.img-view').html(html.join(''));
 | 
	
		
			
				|  |  | -        $('.img-item').mousedown(moveImageItem);
 | 
	
		
			
				|  |  | +        // $('.img-item').mousedown(moveImageItem);
 | 
	
		
			
				|  |  |          $('.img-bar').click(removeImageItem);
 | 
	
		
			
				|  |  | +        setdraggrable();
 | 
	
		
			
				|  |  |      });
 | 
	
		
			
				|  |  |      // 上传图片
 | 
	
		
			
				|  |  |      $('#upload-img').click(function () {
 | 
	
	
		
			
				|  | @@ -473,11 +481,12 @@ $(document).ready(() => {
 | 
	
		
			
				|  |  |                  html.push('<div class="img-bar">');
 | 
	
		
			
				|  |  |                  html.push('<a href="" class="text-danger" title="删除"><i class="fa fa-remove"></i></a>');
 | 
	
		
			
				|  |  |                  html.push('</div>');
 | 
	
		
			
				|  |  | -                html.push('<img src="', '/' + result, '" id="draggable">');
 | 
	
		
			
				|  |  | +                html.push('<div class="focus" style="width:100%; height:100%"><img src="', '/' + result, '" id="draggable" style="width:100%; height:100%"></div>');
 | 
	
		
			
				|  |  |                  html.push('</div>');
 | 
	
		
			
				|  |  |                  $('.img-view').append(html.join(''));
 | 
	
		
			
				|  |  | -                $('.img-item').mousedown(moveImageItem);
 | 
	
		
			
				|  |  | +                // $('.img-item').mousedown(moveImageItem);
 | 
	
		
			
				|  |  |                  $('.img-bar').click(removeImageItem);
 | 
	
		
			
				|  |  | +                setdraggrable();
 | 
	
		
			
				|  |  |              });
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  |      });
 | 
	
	
		
			
				|  | @@ -493,6 +502,8 @@ $(document).ready(() => {
 | 
	
		
			
				|  |  |                      src: $('img', item).attr('src'),
 | 
	
		
			
				|  |  |                      left: item.style.left,
 | 
	
		
			
				|  |  |                      top: item.style.top,
 | 
	
		
			
				|  |  | +                    width: item.style.width,
 | 
	
		
			
				|  |  | +                    height: item.style.height,
 | 
	
		
			
				|  |  |                  };
 | 
	
		
			
				|  |  |                  itemInfo.push(itemData);
 | 
	
		
			
				|  |  |              }
 | 
	
	
		
			
				|  | @@ -521,6 +532,7 @@ $(document).ready(() => {
 | 
	
		
			
				|  |  |              }
 | 
	
		
			
				|  |  |              updateData.img = canvas.toDataURL('image/jpeg');
 | 
	
		
			
				|  |  |              updateData.imgInfo = itemInfo;
 | 
	
		
			
				|  |  | +            console.log(updateData);
 | 
	
		
			
				|  |  |              postData(window.location.pathname + '/merge-img', updateData, function (result) {
 | 
	
		
			
				|  |  |                  _.assign(data, result);
 | 
	
		
			
				|  |  |                  $('#calc-img').html('<img src="/' + data.calc_img + '" class="d-100" width="100%">');
 | 
	
	
		
			
				|  | @@ -534,4 +546,4 @@ $(document).ready(() => {
 | 
	
		
			
				|  |  |              });
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  |      });
 | 
	
		
			
				|  |  | -});
 | 
	
		
			
				|  |  | +});
 |