我正在使用 javascript/jQuery 开发一个打地鼠项目，我希望用户能够将孔拖到屏幕上他们想要的位置，然后按开始开始播放(痣开始从洞里冒出来)但是，首先我需要一个开始按钮来执行此操作，其次我需要这两个图像一起移动，在我实现此 jQuery 代码的那一刻
<SCRIPT>
$(document).ready(function(){
$("#div").draggable();
});
</SCRIPT>
在 div 下，一切都变得可拖动，但由于显而易见的原因，它们不能拖在一起。例如，当我将孔 .gif 移动到不同的位置时，痣 .gif 保持在其原始位置。我需要他们一起行动。至于开始按钮，应该比较简单，但我想不通如何让功能不在加载时运行，只在按钮点击时运行。不管怎样，这是我目前的项目，我知道它很草率。 :P
<html>
<body>
<!--CURSOR-->
<style type="text/css">
body, a, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-5/oth438.cur),
progress;}
</style>
<!--BACKGROUND-->
<body background = "http://i52.tinypic.com/34e9ekj.jpg">
<!--COUNTER(needs to be implemnted)-->
<b><center><font size="5"><div id='counter'>0</div></font></center><b>
<!--TITLE-->
<b><center><i>Whack-A-Mole</i> - by Steven</center></b>
<!--HOLE IMAGES START HERE-->
<!--Hole 1 Row 1-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:33px;margin-top:37px;position:absolute"/>
<!--Hole 2 Row 1-->
<img src="http://i51.tinypic.com/sxheeo.gif" style="margin-left:350px;margin-top:37px;position:absolute"/>
<!--Hole 3 Row 1-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:700px;margin-top:37px;position:absolute"/>
<!--Hole 4 Row 2-->
<img src="http://i51.tinypic.com/sxheeo.gif" style="margin-left:33px;margin-top:200px;position:absolute"/>
<!--Hole 5 Row 2-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:350px;margin-top:200px;position:absolute"/>
<!--Hole 6 Row 2-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:700px;margin-top:200px;position:absolute"/>
<!--Hole 7 Row 3-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:33px;margin-top:350px;position:absolute"/>
<!--Hole 8 Row 3-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:350px;margin-top:350px;position:absolute"/>
<!--Hole 9 Row 3-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:700px;margin-top:350px;position:absolute"/>
<!--HOLE IMAGES END HERE-->
<!--MOLE DIVS START HERE-->
<!--Mole 1 Row 1-->
<div id="randomdiv1"
class="mole">
<img src="http://i56.tinypic.com/2i3tyw.gif" style="margin-left:33px;margin-top:37px;position:absolute"/>
</div>
<!--Mole 2 Row 1-->
<div id="randomdiv2"
class="mole">
<img id="Mole1" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:350px;margin-top:37px;position:absolute"/>
</div>
<!--Mole 3 Row 1-->
<div id="randomdiv3"
class="mole">
<img id="Mole2" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:700px;margin-top:37px;position:absolute"/>
</div>
<!--Mole 4 Row 2-->
<div id="randomdiv4"
class="mole">
<img id="Mole3" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:33px;margin-top:200px;position:absolute"/>
</div>
<!--Mole 5 Row 2-->
<div id="randomdiv5"
class="mole">
<img id="Mole4" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:350px;margin-top:200px;position:absolute"/>
</div>
<!--Mole 6 Row 2-->
<div id="randomdiv6"
class="mole">
<img id="Mole5" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:700px;margin-top:200px;position:absolute"/>
</div>
<!--Mole 7 Row 3-->
<div id="randomdiv7"
class="mole">
<img id="Mole6" src="http://i56.tinypic.com/2i3tyw.gif" style="margin-left:33px;margin-top:350px;position:absolute"/>
</div>
<!--Mole 8 Row 3-->
<div id="randomdiv8"
class="mole">
<img id="Mole8" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:350px;margin-top:350px;position:absolute"/>
</div>
<!--Mole 9 Row 3-->
<div id="randomdiv9"
class="mole">
<img id="Mole9" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:700px;margin-top:350px;position:absolute"/>
</div>
</body>
<!--MOLE DIVS END HERE-->
<head>
<script type="text/javascript" language="JavaScript"><!--
// Type the number of div containers to randomly display below.
NumberOfDivsToRandomDisplay = 9;
var CookieName = 'DivRamdomValueCookie';
function DisplayRandomDiv() {
var r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay);
if(NumberOfDivsToRandomDisplay > 1) {
var ck = 0;
var cookiebegin = document.cookie.indexOf(CookieName + "=");
if(cookiebegin > -1) {
cookiebegin += 1 + CookieName.length;
cookieend = document.cookie.indexOf(";",cookiebegin);
if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
ck = parseInt(document.cookie.substring(cookiebegin,cookieend));
}
while(r == ck) { r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay); }
document.cookie = CookieName + "=" + r;
}
for( var i=1; i<=NumberOfDivsToRandomDisplay; i++) {
document.getElementById("randomdiv"+i).style.display="none";
}
<!--Make counter +1 on mole click-->
document.getElementById("randomdiv"+r).onclick = function() {
counter.innerHTML = parseInt(counter.innerHTML) + 1;
}
document.getElementById("randomdiv"+r).style.display="block";
}
<!--Make moles pop up randomly on a timer-->
DisplayRandomDiv()
setInterval("DisplayRandomDiv()",(Math.random()*500) + 1000);
//--></script>
</head>
</html>
如果不可能，那么哦，好吧，我将不得不换一种方式。如果您需要更多信息，请发表评论，谢谢!
最佳答案
查看 helper option可拖动的。
我猜你可以这样做:
helper: function(event) {
var $holeMoleContainer = '<div></div>';
$holeMoleContainer.append($('#holeImage'), $('#moleDiv'));
return $holeMoleContainer;
}
这只是伪代码，我从未真正这样做过。我做了更简单的事情，比如创建并拖动新元素:
helper: function(event) {
return $('<div>I\'m being dragged!</div>');
}
关于javascript - 如何让两个框架一起拖动？(jQuery)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6590528/