admin: image prew moveable

app/assets/javascripts/bootstrap.viewer.js

@@ -22,9 +22,9 @@ $.fn.bootstrapViewer = function (options) {
             '          <div class="modal-dialog modal-lg" style="display: inline-block; width: auto;">\n' +
             '            <div class="modal-content">\n' +
             '             <img' +
-            '\t\t\t class="carousel-inner img-responsive img-rounded img-viewer" \n' +
-            '\t\t\t onclick="$(\'#bootstrapViewer\').modal(\'hide\');setTimeout(function(){$(\'#bootstrapViewer\').remove();},200);"\n' +
-            '\t\t\t onmouseover="this.style.cursor=\'zoom-out\';" \n' +
+            '\t\t\t class="carousel-inner img-responsive img-rounded img-viewer" draggable="false"\n' +
+            '\t\t\t onclick="/*$(\'#bootstrapViewer\').modal(\'hide\');setTimeout(function(){$(\'#bootstrapViewer\').remove();},200);*/"\n' +
+            '\t\t\t onmouseover="this.style.cursor=\'move\';" \n' +
             '\t\t\t onmouseout="this.style.cursor=\'default\'"  \n' +
             '\t\t\t />\n' +
             '            </div>\n' +
@@ -37,13 +37,41 @@ $.fn.bootstrapViewer = function (options) {
         } else {
             throw "图片不存在"
         }
+        $('#bootstrapViewer').on('hidden.bs.modal', function(){
+          $('#bootstrapViewer').remove();
+        });
 
+        var $moveDiv = $('#bootstrapViewer .modal-dialog');
+        var isMove = false;
+        var div_x = $moveDiv.offset().left;
+        var div_y = $moveDiv.offset().top;
+
+        var mousedownFunc = function (e) {
+          if (isMove) {
+            var left = e.pageX - div_x;
+            var top = e.pageY - div_y;
+            if(left < 0){ left = 0}
+            if(top < 0){ top = 0}
+            $moveDiv.css({"left": left, "top":top});
+          }
+        }
+
+        $moveDiv.mousedown(function (e) {
+          $moveDiv.css({ left: $moveDiv[0].offsetLeft, top: $moveDiv[0].offsetTop, marginTop: 0, position: 'absolute' });
+
+          isMove = true;
+          div_x = e.pageX - $moveDiv.offset().left;
+          div_y = e.pageY - $moveDiv.offset().top;
+          $(document).mousemove(mousedownFunc);
+        }).mouseup(function () {
+          isMove = false;
+          $(document).unbind('mousemove', mousedownFunc);
+        });
     })
 
     $(this).on('mouseover', function () {
         $(this).css('cursor', 'zoom-in');
     })
-
 }
 $.fn.bootstrapViewer.defaults = {
     src: 'src'

public/assets/admin-432c4eac09b036c57ff1e88d902b8aa7df81164e4b419bac557cf1366c1d3ad9.js

@@ -27586,9 +27586,9 @@ $.fn.bootstrapViewer = function (options) {
             '          <div class="modal-dialog modal-lg" style="display: inline-block; width: auto;">\n' +
             '            <div class="modal-content">\n' +
             '             <img' +
-            '\t\t\t class="carousel-inner img-responsive img-rounded img-viewer" \n' +
-            '\t\t\t onclick="$(\'#bootstrapViewer\').modal(\'hide\');setTimeout(function(){$(\'#bootstrapViewer\').remove();},200);"\n' +
-            '\t\t\t onmouseover="this.style.cursor=\'zoom-out\';" \n' +
+            '\t\t\t class="carousel-inner img-responsive img-rounded img-viewer" draggable="false"\n' +
+            '\t\t\t onclick="/*$(\'#bootstrapViewer\').modal(\'hide\');setTimeout(function(){$(\'#bootstrapViewer\').remove();},200);*/"\n' +
+            '\t\t\t onmouseover="this.style.cursor=\'move\';" \n' +
             '\t\t\t onmouseout="this.style.cursor=\'default\'"  \n' +
             '\t\t\t />\n' +
             '            </div>\n' +
@@ -27601,13 +27601,41 @@ $.fn.bootstrapViewer = function (options) {
         } else {
             throw "图片不存在"
         }
+        $('#bootstrapViewer').on('hidden.bs.modal', function(){
+          $('#bootstrapViewer').remove();
+        });
+
+        var $moveDiv = $('#bootstrapViewer .modal-dialog');
+        var isMove = false;
+        var div_x = $moveDiv.offset().left;
+        var div_y = $moveDiv.offset().top;
+
+        var mousedownFunc = function (e) {
+          if (isMove) {
+            var left = e.pageX - div_x;
+            var top = e.pageY - div_y;
+            if(left < 0){ left = 0}
+            if(top < 0){ top = 0}
+            $moveDiv.css({"left": left, "top":top});
+          }
+        }
 
+        $moveDiv.mousedown(function (e) {
+          $moveDiv.css({ left: $moveDiv[0].offsetLeft, top: $moveDiv[0].offsetTop, marginTop: 0, position: 'absolute' });
+
+          isMove = true;
+          div_x = e.pageX - $moveDiv.offset().left;
+          div_y = e.pageY - $moveDiv.offset().top;
+          $(document).mousemove(mousedownFunc);
+        }).mouseup(function () {
+          isMove = false;
+          $(document).unbind('mousemove', mousedownFunc);
+        });
     })
 
     $(this).on('mouseover', function () {
         $(this).css('cursor', 'zoom-in');
     })
-
 }
 $.fn.bootstrapViewer.defaults = {
     src: 'src'