代码之家 › 专栏 › 技术社区 › Daiaiai

在我的

css javascript

-1

Daiaiai · 技术社区 · 8 年前

我试着做一个小演示,在那里我可以拖动和放大圆圈。

由于stackoverflow,我有了使其在一个循环中工作的功能,现在我可以继续复制粘贴代码,只需编辑函数/变量名称。但我认为这不是正确的方法。

我的代码与样式和css变量类似:

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();
});

: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;
}

<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>

您可以在这里看到: https://codepen.io/daiaiai/pen/QQXrGz 我该如何设置代码,使其具有更清晰的代码而不至于太高级(这样我仍然可以作为一个明确的初学者理解那里做了什么) 对于多个圆#circle\u 3#circle\u 4。。。。

2 回复 | 直到 8 年前

George 8 年前

我可以看到您在代码中使用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">

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

trixo 8 年前

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

// 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);

: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;
}

<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"/>