Question

我坚持这一点，对我所缺少的一些建议会非常感激。基本上我有runcode按钮执行代码，但我认为我做得不对。

code = code + dropped.item.attr（“rcode”）;
（无论放在放置区域，显示圆圈/更改颜色等）

提前多多感谢！

<html>
  <head>
    <style>
    .block {
      width: 200px;
      background-color: yellow;
      margin: 10px;
      cursor: move;
    }
    .container {
      width: 300px;
      height: 250px;
      background-color: lightgray;
    }
    .output {
      width: 300px;
      height: 200px;
      background-color: lightgreen;
    }
    .circle {
      width: 100px;
      height: 100px;
      border-radius: 100px;
      background-color: red;
      display: none;
    }
  </style>
  <script>
    function addItem() {
      alert("Hire security team!");
    }
  </script>
</head>
<body>
  <center>
    <div class= "block" rcode= "$('.circle').show();" >Show Circle </div>
    <div class= "block" rcode= "$('.circle').css({'background-color':'blue'})"> Make the circle blue </div>
    <div class= "block" rcode= "$('.circle').fadeOut(500);">Fade out Circle </div>
    <div class= "block" rcode= "$('.circle').slideUp(500);">Slide Up</div>
    <br>
    <div class= "container" ></div>
    <br>
    <button id="runcodebtn" >Run Code</button>
    </br></br>
    <div class= "output" ></div>
    <div class= "circle" ></div>
  </center>
</body>
</html>
<script src= "https://code.jquery.com/jquery-3.3.1.min.js"> </script>
<script src= "https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"> </script>
<script>
  $(".block").draggable({helper: 'clone'});

  $(".container").droppable ({
      accept: ".block",
      drop:function(event,ui) {
          var dropped_item= $(ui.draggable)();
          $(this).append(dropped_item);
          code= code+ dropped.item.attr("rcode");
      }
  });

  $("#runcodebtn").click(function() {
      eval(code);
  });
</script>

Answer 1

下面提到了几个小修补程序：

使用var dropped_item= $(ui.draggable);代替var dropped_item= $(ui.draggable)();

和code = code + dropped_item.attr("rcode");代替code = code + dropped.item.attr("rcode");

和已启动的变量code

function addItem() {
   alert("Hire security team!");
  }
$(document).ready(function(){
var code = "";
	$(".block").draggable({helper: 'clone'});
	$(".container").droppable ({
			accept: ".block",
			drop:function(event,ui){
				 var dropped_item= $(ui.draggable);    		// from $(ui.draggable).clone();
				 $(this).append(dropped_item);
				 code = code + dropped_item.attr("rcode");
			}
		});
	$("#runcodebtn").click(function(){
		eval(code);
	});
  });

.block {
	width:200px;
	background-color: yellow;
	margin:10px;
	cursor: move;
}
.container {
	width:300px;
	height:250px;
	background-color: lightgray;
}
.output	{
	width:300px;
	height:200px;
	background-color:lightgreen;
}
.circle	{
	width:100px;
	height:100px;
	border-radius:100px;
	background-color:red;
	display: none;
}

<script src= "https://code.jquery.com/jquery-3.3.1.min.js"> </script>
<script src= "https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"> </script>
<center>
<div class= "block" rcode= "$('.circle').show();" >Show Circle </div>
<div class= "block" rcode= "$('.circle').css({'background-color':'blue'});"> Make the circle blue </div>
<div class= "block" rcode= "$('.circle').fadeOut(500);">Fade out Circle </div>
<div class= "block" rcode= "$('.circle').slideUp(500);">Slide Up</div>
<br>
<div class= "container" ></div>
<br>
<button id="runcodebtn" >Run Code</button>
</br></br>
<div class= "output" ></div>
<div class= "circle" ></div>
</center>
 <input type="text" value="Testbutton"/>
 <input type="button" value="Add item" onclick="addItem();"/>
</center>

制作一个评估按钮（代码）

1 个答案: