draggable& droppable jquery比较id

时间:2015-01-13 18:19:13

标签: javascript jquery html css jquery-ui

我正在寻找如何在draggable& dropabble元素中比较id的选项。这是我第一次使用jquery。

其实我有(片段):

$(".letter").draggable();
$(".simpleSlot").droppable({
  drop: function( event, ui ) {
    var idDrag = ui.draggable.attr("id");
    var idDrop = $this.attr("id");
    $("#TEST").text("idDrag:" + idDrag + "; idDrop:" + idDrop);
    if(idDrag == idDrop){ alert("Done!"); }
  }
});

Droppable元素:

var letter = $("<div class=\"letter\" id=\""+divId+"\"></div>").text(splitedWord[i]);

$("#divId").css({
  left: positionX, top: positionY
});

$("#mixedWord").append(letter);

可以用相同的方式生成可拖动元素。

我的css for droppable:

.letter{
    border: 2px solid;
    border-radius: 25px;
    width: 50px;
    height: 50px;
    font-size: 30px;
    text-align: center;
    position: absolute;
}

HTML

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script src="js/flipclock/libs/prefixfree.min.js"></script>
    <script src="js/flipclock/flipclock.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    <style>
        #draggable { width: 150px; height: 150px; padding: 0.5em; }
    </style>
</head>
<body>
<div id="area">
    <div id="time">Time:</div>
    <div id="mixedWord"><!--here goes random word as simple letters in simple divs-->  </div>
    <div id="slots"></div>
    <div id="height"></div>
    <div id="width"></div>
</div>
</body>

我的问题:

  1. 可拖动的作品。但是,当我在可投放元素上放置一些东西时 - 我无法再移动它。不可能是那样。
  2. 它不会改变#TEST - 所以这意味着drop不起作用。为什么?
  3. 我没有警觉。

0 个答案:

没有答案