Question

我正在使用javascript / jQuery进行一个whack-a-mole项目，我想让用户能够将这些洞拖到屏幕上他们喜欢的位置，然后按开始开始播放（鼹鼠开始从漏洞中弹出）但是，首先我需要一个启动按钮来执行此操作，然后我需要将这两个图像一起移动，此时我实现此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>

如果不可能，那么哦，我将不得不采取不同的方式。如果您需要更多信息，请发表评论，谢谢！

Answer 1

查看可拖动的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>');
}

Answer 2

我认为你的标记代码中存在一些问题，可以做得更好，让自己更轻松。

首先，我会将洞和鼹鼠放在div中，如此：

<div class="mole">
    <img class="hole" src ="http://i51.tinypic.com/sxheeo.gif"/>
    <img class="mole" src="http://i56.tinypic.com/2i3tyw.gif"/>
</div>

然后我会克隆它并添加一个id ...类似于：

function CreateMoles(rows, cols) 
{
    var blankMole = $('<div class="mole"> <img class="hole" src ="http://i51.tinypic.com/sxheeo.gif"/><img class="mole" src="http://i56.tinypic.com/2i3tyw.gif"/> </div>');

    for (var rownumber = 1; rownumber <= rows; rownumber++)
    {
        for (var colnumber = 1; colnumber <= cols; colnumber ++)
        {
            var newMole = blankMole.clone();
            newMole.attr("id", "randomdiv" + (rownumber * colnumber))
                .css({left: (100 * (colnumber -1)), top: (100 * (rownumber -1))});
            $("#moles").append(newMole);
        }
    }
}

也可以清理javascript：

$(document).ready(function() {
    $("div").draggable();
    $("div.mole").click(function() {
        if($(this).data("state") == "up")
        {
            var counter = $("#counter");
            counter.data("counter", counter.data("counter") +1);
            counter.text(counter.data("counter"));
        }
    });

    DisplayRandomDiv()
    window.setInterval("DisplayRandomDiv()", (Math.random() * 500) + 1000);
});

这样做只设置一次点击事件并保存您设置/取消设置。

在所有Cookie之后的DisplayRandomDiv()中：

$("div.mole img.mole").hide();
$("div.mole").data("state", "down");


$("#randomdiv" + r + " img.mole").show();    
$("#randomdiv" + r).data("state", "up");

现在你正在使用更多jQuery（不太简单的Javascript），你可以改变它们的摩尔数，并且它们都在一起拖动。（你必须在那里放一些我缺少的造型，但它不能太难）

基本上工作jsfiddle：http://jsfiddle.net/TEUSA/5/

更新： -

我在代码中发现了一个错误。 newMolew.attr("id", ...行应该((rownumber - 1) * cols + colnumber)而不是(rownumber * colnumber)。

如何将两个帧拖到一起？（jQuery）

2 个答案: