使用 css 围绕 div 自定义覆盖 - jQuery 可调整大小的自定义句柄

Posted 2023-05-09

【中文标题】使用 css 围绕 div 自定义覆盖 - jQuery 可调整大小的自定义句柄

【英文标题】：Custom overlay around a div using css - Custom handle for jQuery resizable

【发布时间】：2018-03-18 22:05:20

【问题描述】：

您好，我在我的项目中使用 jquery resizable, rotatable() [https://cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.min.js]。

所以当调用这个函数时，我得到了旋转和调整 div 大小的句柄。

$( function() 

        var inputLocalFont = document.getElementById("user_file");
        inputLocalFont.addEventListener("change",previewImages,false);

        function previewImages()
            var fileList = this.files;

            var anyWindow = window.URL || window.webkitURL;

                for(var i = 0; i < fileList.length; i++)
                  var objectUrl = anyWindow.createObjectURL(fileList[i]);
                  $('.new-multiple').append('<div class="img-div"><img src="' + objectUrl + '" class="newly-added" /></div>');
                  window.URL.revokeObjectURL(fileList[i]);
                

        $( ".img-div" ).draggable();
	      $('.img-div').rotatable();
        $( ".img-div" ).resizable(aspectRatio:true);
              $(".newly-added").on("click", function(e) 
	   $(".newly-added").removeClass("img-selected");
       $(this).addClass("img-selected");
	    e.stopPropagation()
    );

	  $(document).on("click", function(e) 
		if ($(e.target).is(".newly-added") === false) 
		  $(".newly-added").removeClass("img-selected");
		
	  );
              
               
);

.new-multiple
  width:400px !important;
  height:400px !important;
  background:white;
  border:2px solid red;
  overflow:hidden;
  
  
  
 .img-div
   width:200px;
   height:200px;
  
 .newly-added
    width:100%;
    height:100%;
 

.img-selected
  box-shadow: 1px 2px 6px 6px rgb(206, 206, 206);
  border:2px solid rgb(145, 44, 94);

.ui-resizable-handle.ui-resizable-se.ui-icon.ui-icon-gripsmall-diagonal-se 
    background-color: white;
    border: 1px solid tomato;

.ui-rotatable-handle.ui-draggable 
    background-color: white !important;
    border: 1px solid tomato;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript"  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>	
<script src="https://cdn.jsdelivr.net/gh/godswearhats/jquery-ui-rotatable@1.1/jquery.ui.rotatable.min.js"></script>
<input   name="user_file[]" id="user_file" style="position: relative;overflow: hidden" multiple="" type="file">

 <div class="new-multiple"></div>

https://jsfiddle.net/vd11qyzv/21/

所以当我上传图片时，我会得到这样的控制句柄

但我想像这样放置自定义控制句柄

如何使用 css 和 jquery 实现这一点。请帮忙

【问题讨论】：

你可能想从这里开始：api.jqueryui.com/resizable/#option-handles 正如我在你之前的帖子中提到的，如果你看的话，有很多可用的资源。甚至是例子。

【参考方案1】：

当您将handles 选项设置为可调整大小时，您可以使用 CSS 管理它们。他们的风格和位置。

CSS 片段

.ui-resizable-handle 
  border: 0;
  border-radius: 50%;
  background-color: #00CCff;
  width: 14px;
  height: 14px;


.ui-resizable-nw 
  top: -7px;
  left: -7px;


.ui-resizable-ne 
  top: -7px;
  right: -7px;


.ui-resizable-e 
  top: calc(50% - 7px);
  right: -7px;


.ui-resizable-w 
  top: calc(50% - 7px);
  left: -7px;


.ui-resizable-sw 
  bottom: -7px;
  left: -7px;


.ui-resizable-se 
  right: -7px;
  bottom: -7px;


.ui-resizable-se.ui-icon 
  display: none;


.ui-rotatable-handle 
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  border-radius: 50%;
  background-color: #00CCff;
  margin-left: calc(50% - 9px);
  bottom: -5px;
  width: 18px;
  height: 18px;

JavaScript

$(function() 
  var inputLocalFont = $("#user_file");
  inputLocalFont.change(previewImages);

  function previewImages() 
    var fileList = this.files;
    var anyWindow = window.URL || window.webkitURL;

    for (var i = 0; i < fileList.length; i++) 
      var objectUrl = anyWindow.createObjectURL(fileList[i]);
      var $newDiv = $("<div>", 
        class: "img-div"
      );
      var $newImg = $("<img>", 
        src: objectUrl,
        class: "newly-added"
      ).appendTo($newDiv);
      $(".new-multiple").append($newDiv);
      $newDiv.draggable();
      $newDiv.rotatable();
      $newDiv.resizable(
        aspectRatio: true,
        handles: "ne, nw, e, se, sw, w"
      );
      $newDiv.find(".ui-icon").removeClass("ui-icon ui-icon-gripsmall-diagonal-se");
      window.URL.revokeObjectURL(fileList[i]);
    
    $(".newly-added").on("click", function(e) 
      $(".newly-added").removeClass("img-selected");
      $(this).addClass("img-selected");
      e.stopPropagation()
    );

    $(document).on("click", function(e) 
      if ($(e.target).is(".newly-added") === false) 
        $(".newly-added").removeClass("img-selected");
      
    );
  
);

工作示例：https://jsfiddle.net/Twisty/s99kxydw/

【讨论】：

真的谢谢你的朋友。你太聪明了 。你怎么能做到这么快？