Question

我尝试制作一个小型演示，我可以拖动和放大圆圈。

我有一个功能（感谢stackoverflow）使这个工作在一个圆圈，我现在可以继续和copypaste该代码，只需编辑功能/变量名称。但我不认为这是正确的做法。

我的代码看起来像样式和css变量：

＆＃13;

var circle_1 = document.querySelector("#circle_1");
var resizer_1 = document.querySelector("#resizer_1");
var size_1 = document.body.style.getPropertyValue("--size_1");
var circle_2 = document.querySelector("#circle_2");
var resizer_2 = document.querySelector("#resizer_2");
var size_2 = document.body.style.getPropertyValue("--size_2");

// Function(s) to grow the circle having terrible spaghettis ahead
function growCircle_1() {
  var size_1 = window.getComputedStyle(circle_1).getPropertyValue("--size_1");
  var size_1_n = size_1 * 2;
  circle_1.style.setProperty("--size_1", size_1_n);
}
function growCircle_2() {
  var size_2 = window.getComputedStyle(circle_2).getPropertyValue("--size_2");
  var size_2_n = size_2 * 2;
  circle_1.style.setProperty("--size_2", size_2_n);
}

// Event listener
resizer_1.addEventListener("click", growCircle_1, false);
resizer_2.addEventListener("click", growCircle_2, false);

// Drag-Zone
$( function() {
  $( "#circle_1" ).draggable();
  $( "#circle_2" ).draggable();
});

＆＃13;

:root {
  --size_1: 50;
  --size_2: 50;
}

body {
  margin: 100px;
}

#circle_1 {
  width: calc(var(--size_1, 50px) * 1px);
  height: calc(var(--size_1, 50px) * 1px);
  border-radius: 50%;
  margin-top: 20px;
  background-color: pink;
  opacity: 0.7;
  display: inline-block;
  transition: 0.3s;
}

#circle_2 {
  width: calc(var(--size_2, 50px) * 1px);
  height: calc(var(--size_2, 50px) * 1px);
  border-radius: 50%;
  margin-top: 20px;
  background-color: cyan;
  opacity: 0.7;
  display: inline-block;
  transition: 0.3s;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.css" rel="stylesheet"/>

<div id="circle_1" draggable="true">

  <span id="resizer_1">Group 1</span>
</div>
<div id="circle_2" draggable="true">
  <span id="resizer_2">Group 2</span>
</div>

＆＃13;

你可以在这里看到：https://codepen.io/daiaiai/pen/QQXrGz 我如何设置代码以获得更清晰的代码，而不是太高级（所以我仍然可以作为一个明确的初学者了解在那里做了什么）多圈＃circle_3＃circle_4 ....

Answer 1

在javascript中使用class :)它不是完整的解决方案。你需要添加更多的东西，比如样式事件监听器等，但是它可行。试一试

＆＃13;

// Drag-Zone
$( function() {
  $( "#circle_1" ).draggable();
  $( "#circle_2" ).draggable();
  $( "#circle_3" ).draggable();
  
});

class Circle {
  constructor(id,name,size, color,opacity) {
    this.id=id;
    this.name=name;
    this.size = size;
    this.color = color;
    this.opacity = opacity;
    
  }
  get Add(){
    return this.html();
  }
  html(){
    let circleHtml='<div style="width=" id="circle_'+this.id+'" draggable="true"><span id="resizer_'+this.id+'">'+this.name+'<span></div>';
    return circleHtml;
  }
}
const circle1 = new Circle(1,"Group1","50px","red","0.7");
$(document.body).append(circle1.Add);
const circle2 = new Circle(2,"Group2","50px","red","0.7");
$(document.body).append(circle2.Add);

＆＃13;

:root {
  --size_1: 50;
  --size_2: 50;
}

body {
  margin: 100px;
}

#circle_1 {
  width: calc(var(--size_1, 50px) * 1px);
  height: calc(var(--size_1, 50px) * 1px);
  border-radius: 50%;
  margin-top: 20px;
  background-color: pink;
  opacity: 0.7;
  display: inline-block;
  transition: 0.3s;
}

#circle_2 {
  width: calc(var(--size_2, 50px) * 1px);
  height: calc(var(--size_2, 50px) * 1px);
  border-radius: 50%;
  margin-top: 20px;
  background-color: cyan;
  opacity: 0.7;
  display: inline-block;
  transition: 0.3s;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.css" rel="stylesheet"/>

＆＃13;

Answer 2

我可以看到你在代码中使用了jquery，

$( function() {
    $( "#circle_1" ).draggable();
  $( "#circle_2" ).draggable();
  } );

使用jquery它更容易。我们可以使用jqueryUi resizable

你的Html

<div class="circle ui-widget-content" draggable="true">
<div class="circle ui-widget-content" draggable="true">
<div class="circle ui-widget-content" draggable="true">
<div class="circle ui-widget-content" draggable="true">

CSS

.circle{
   width: 50px
   height: 50px
   border-radius: 50%;
   margin-top: 20px;
   background-color: pink;
   opacity: 0.7;
   display: inline-block;
   transition: 0.3s;
}

JS

$( function() {
   $( ".circle" ).draggable();
   $( ".circle" ).resizable({
      aspectRatio: 1 / 1  /*to keep the width same as the height*/
   });
});

重要，以便您可以使用可调整大小的工作 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

这就是你所需要的，你将拥有一个可拖动和可调整大小的圈子

在我的使用中使用较少的意大利面条代码

2 个答案: