Javascript noob ...
我的伴侣是一名幼儿园老师，有时请我做她可以在课堂上使用的东西。她让我做一台“功能机器”。我做到了，它工作正常。我拼凑了一些JS，让它可以拖放工作。 我遇到的问题是拖动时，被拖动的鬼影丢失了。我认为这个问题就是我在拖拽JS时遇到的问题。我从数据属性中获取信息。
有人能想出一种让幽灵形象出现的方法吗？
Codepen：Function Machine
HTML
<html lang="en">
<head>
<title>Function Machine</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
</head>
<body>
<div id="wrapper" class="toggled">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<div class="text-center">
<span class="choose">Select Operator:</span>
<div class="row mt-2">
<div class="col-5 ml-4">
<button type="button" class="btn btn-info btn-lg btn-block addBut"><i class="fas fa-plus"></i></button>
</div>
<div class="col-5">
<button type="button" class="btn btn-info btn-lg btn-block subBut"><i class="fas fa-minus"></i></button>
</div>
</div>
</div>
<ul class="sidebar-nav choice add">
<li class="instruct my-2">Drag the rule to the rule box</li>
<li draggable="true">
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="add1" draggable="true" ondragstart="drag(event)" class="number" data-operation="add" data-value="1">
Add 1
</div>
</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="add2" draggable="true" ondragstart="drag(event)" class="number" data-operation="add" data-value="2">
Add 2
</div>
</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="add3" draggable="true" ondragstart="drag(event)" class="number" data-operation="add" data-value="3">
Add 3
</div>
</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="add4" draggable="true" ondragstart="drag(event)" class="number" data-operation="add" data-value="4">
Add 4
</div>
</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="add5" draggable="true" ondragstart="drag(event)" class="number" data-operation="add" data-value="5">
Add 5
</div>
</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="add6" draggable="true" ondragstart="drag(event)" class="number" data-operation="add" data-value="6">
Add 6
</div>
</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="add7" draggable="true" ondragstart="drag(event)" class="number" data-operation="add" data-value="7">
Add 7
</div>
</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="add8" draggable="true" ondragstart="drag(event)" class="number" data-operation="add" data-value="8">
Add 8
</div>
</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="add9" draggable="true" ondragstart="drag(event)" class="number" data-operation="add" data-value="9">
Add 9
</div>
</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="add10" draggable="true" ondragstart="drag(event)" class="number" data-operation="add" data-value="10">
Add 10
</div>
</li>
</ul>
<!-- SUBTRACTION -->
<ul class="sidebar-nav choice sub">
<li class="instruct">Drag the rule to the rule box</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="sub1" draggable="true" ondragstart="drag(event)" class="number" data-operation="subtract" data-value="1">
Subtract 1
</div>
</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="sub2" draggable="true" ondragstart="drag(event)" class="number" data-operation="subtract" data-value="2">
Subtract 2
</div>
</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="sub3" draggable="true" ondragstart="drag(event)" class="number" data-operation="subtract" data-value="3">
Subtract 3
</div>
</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="sub4" draggable="true" ondragstart="drag(event)" class="number" data-operation="subtract" data-value="4">
Subtract 4
</div>
</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="sub5" draggable="true" ondragstart="drag(event)" class="number" data-operation="subtract" data-value="5">
Subtract 5
</div>
</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="sub6" draggable="true" ondragstart="drag(event)" class="number" data-operation="subtract" data-value="6">
Subtract 6
</div>
</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="sub7" draggable="true" ondragstart="drag(event)" class="number" data-operation="subtract" data-value="7">
Subtract 7
</div>
</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="sub8" draggable="true" ondragstart="drag(event)" class="number" data-operation="subtract" data-value="8">
Subtract 8
</div>
</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="sub9" draggable="true" ondragstart="drag(event)" class="number" data-operation="subtract" data-value="9">
Subtract 9
</div>
</li>
<li>
<span class="dragger"><i class="fas fa-ellipsis-v"></i></span>
<div id="sub10" draggable="true" ondragstart="drag(event)" class="number" data-operation="subtract" data-value="10">
Subtract 10
</div>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="wrap">
<h1 id="logo">Function Machine</h1>
</div>
<div class="machine">
<div class="machineHolder">
<input id="numberIn" class="form-control form-control-lg" type="text" placeholder="Enter Your Number">
<i class="arrowdown fas fa-arrow-down"></i>
<svg id="funcMachine" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 113.98"><defs><style>.cls-1,.cls-4{fill:#88C542;}.cls-1,.cls-3{stroke:#333;stroke-miterlimit:10;}.cls-2{font-size:25px;fill:#333;font-family:OpenSans-Bold, Open Sans;font-weight:700;}.cls-3{fill:none;}</style></defs><title>functionMachine</title><path id="mainBox" class="cls-1" d="M14.38,17.5H126.5a0,0,0,0,1,0,0V82.63A13.88,13.88,0,0,1,112.63,96.5H.5a0,0,0,0,1,0,0V31.38A13.88,13.88,0,0,1,14.38,17.5Z"/><path id="in" class="cls-1" d="M21.94,18.06,12.5,8.63V.5h29V8.75L32.15,18.1S21.93,18.07,21.94,18.06Z"/><path id="out" class="cls-1" d="M105.15,95.92l9.43,9.44v8.12h-29v-8.25l9.35-9.35S105.16,95.91,105.15,95.92Z"/>
<path id="RuleBox" class="cls-1" d="M126.5,82.63V57H.5V96.5H112.63A13.87,13.87,0,0,0,126.5,82.63Z"/><text class="cls-2" transform="translate(11.95 46)">Rule</text><line class="cls-3" x1="0.5" y1="57.02" x2="126.5" y2="57.02"/><rect id="coverup" class="cls-4" x="20.96" y="18.05" width="12.21" height="2.83"/><rect id="coverup-2" data-name="coverup" class="cls-4" x="22.17" y="16.46" width="9.83" height="6.21"/><rect id="coverup-3" data-name="coverup" class="cls-4" x="94.4" y="93.14" width="12.21" height="2.83"/><rect id="coverup-4" data-name="coverup" class="cls-4" x="94.5" y="91.55" width="10.94" height="6.21" transform="translate(199.94 189.3) rotate(180)"/></svg>
<div id="ruleDrop" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<i class="arrowup fas fa-arrow-down"></i>
<div id="result">
</div>
</div>
</div>
<a href="#menu-toggle" class="btn btn-secondary" id="menu-toggle">Toggle Menu</a>
<button class="btn btn-secondary" id="calcResult">Run Machine</button>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
CSS：
body {
overflow-x: hidden;
background-color: #f0a32f;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #844d9e;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 133px;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
@media (min-width: 768px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
.add {
display: block;
}
.sub {
display: none;
}
.choose {
font-size: 24px;
margin-right: 10px;
color: #fff;
margin-top: 32px;
clear: both;
display: block;
}
.instruct {
font-size: 16px;
color: #fff;
}
.machine {
width: 100%;
}
.machineHolder {
max-width: 250px;
margin: 0 auto;
}
.arrowup {
float: right;
margin-right: 30px;
font-size: 48px;
margin-top: -6px;
}
.arrowdown {
margin-left: 31px;
font-size: 48px;
}
#funcMachine {
position: relative;
z-index: -1;
}
#ruleDrop {
width: 250px;
height: 79px;
float: left;
margin-top: -115px;
font-size: 41px;
padding-left: 20px;
color: #fff;
}
#RuleBox {
position: relative;
z-index: 1;
}
.number {
position: relative;
z-index: 2;
color: #fff;
border-top: 1px solid rgba(65, 38, 78, 0.3);
}
li:last-child {
border-bottom: 1px solid rgba(65, 38, 78, 0.3);
}
.number:hover {
cursor: -moz-grab;
cursor: -webkit-grab;
cursor: grab;
}
#result {
width: 250px;
height: 100px;
border: 1px solid #000;
}
/*#ruleDrop > .number {
width: 100%;
font-size: 41px;
padding-left: 20px;
margin-top: 7px;
}*/
.dragger {
color: #fff;
font-size: 20px;
float: left;
margin-left: -30px;
}
.btn-info {
background-color: #88c542;
border-color: #88c542;
}
.btn-info:hover {
background-color: #517627;
border-color: #446221;
}
.titleBox {
width: 100%;
}
.titleBox h1 {
text-align: center;
}
JS
var currentOperation = null;
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
var elData = $(ev.target).data();
ev.dataTransfer.setData("operation", elData.operation);
ev.dataTransfer.setData("value", elData.value);
ev.dataTransfer.setData("text", ev.target.innerHTML);
}
function drop(ev) {
ev.preventDefault();
ev.target.style.opacity = "1";
ev.target.innerHTML = ev.dataTransfer.getData("text");
currentOperation = {};
currentOperation.operation = ev.dataTransfer.getData("operation");
currentOperation.value = ev.dataTransfer.getData("value");
}
$("#calcResult").click(function() {
var inputNum = $("#numberIn").val();
inputNum = parseInt(inputNum);
var result = 0;
if (currentOperation) {
var value = parseInt(currentOperation.value);
if (currentOperation.operation == "subtract") {
result = inputNum - value;
} else if (currentOperation.operation == "add") {
result = inputNum + value;
}
}
//Display result
document.getElementById("result").innerHTML = result;
$(".arrowdown").addClass("animated bounce");
});
$(".addBut").click(function() {
$(".add").css("display", "block");
$(".sub").css("display", "none");
});
$(".subBut").click(function() {
$(".add").css("display", "none");
$(".sub").css("display", "block");
});
答案 0 :(得分：0)
我能够弄清楚这一点。
if self.rect.right >= SWIDTH:
self.rect.right = SWIDTH
self.vel.x = 0
self.anim_type = 0
self.accelerating = False
self.pos.x = self.rect.left
elif self.rect.left <= 0:
self.rect.left = 1
self.vel.x = 0
self.anim_type = 0
self.accelerating = False
self.pos.x = self.rect.left