首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >当已在可放置空间中时,如何默认拖动的项目

当已在可放置空间中时,如何默认拖动的项目
EN

Stack Overflow用户
提问于 2012-07-17 03:44:30
回答 2查看 110关注 0票数 1

我刚刚开始这方面的工作,但我想知道如何才能采用下面这个非常简单的示例并进行修改,以便如果可拖动的div已经放在可放的div上,它就不会触发警报。

代码语言:javascript
复制
      <script type="text/javascript">
          $(function () {
              $("#draggable-1").draggable();
              $("#draggable-2").draggable();


              $("#droppable").droppable({
                  drop: function (event, ui) {
                      var currentId = $(ui.draggable).attr('id');

                      if (currentId == "draggable-1") {
                          $(this)

                          // would like to prevent this if draggable is already dropped!
                          alert("Adding Item #1.")


                      } else {
                          $(this)
                          alert("Adding Item #2.")
                      }
                  }
              });
          });
      </script>
    <table width="100%"><tr><th>Draggable</th><th>Order Section</th><tr><td>
    <div id="draggable-1">
        <p>Item #1</p>
    </div>

    <div id="draggable-2">
        <p>Item #2.</p>
    </div>

    <div id="droppable">
        <p>Add Your Item</p>  
    </div>
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-07-17 04:45:09

一个对我有效的解决方案是:

代码语言:javascript
复制
var wasInDrop = false;
var finishInDrop = false;
$("#draggable_1").draggable({
    start:  function(event, ui){
            if (! finishInDrop){
                wasInDrop = false;
            }
            finishInDrop = false; //will be set to true if landing in drop.
        },
    stop:     function(event, ui){
            if (finishInDrop && !wasInDrop){
                          alert("Adding Item #1.");
            }
            if (finishInDrop){ wasInDrop=true;}

        }
    });

$("#droppable").droppable({
    drop: function (event, ui) {
        $(this)
        var currentId = $(ui.draggable).attr('id');
        if (currentId == "draggable_1") {
            finishInDrop = true; //for this time.
        }
    });

以此类推。我们的想法是,在以下情况下,可拖动对象会触发警报:

  1. 它在droppable内部完成。
  2. 它没有在droppable内部开始。
票数 1
EN

Stack Overflow用户

发布于 2012-07-17 06:47:52

检查这个小提琴:http://jsfiddle.net/100thGear/XfUvS/

位置有一点错误,但达到了预期的效果。如果这有帮助,请告诉我!

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11511434

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档