【问题标题】:JQ drag & drop - I can get the over event to fire but not the drop?JQ拖放-我可以触发over事件但不能触发drop?
【发布时间】:2011-12-14 20:30:42
【问题描述】:

所以我有一个列表,其元素被列为可放置。

当我尝试在这些元素上拖动可拖动对象时,我无法触发放置功能。

但是,如果我将 over 函数添加到 droppable 中,它会正常触发...我无法弄清楚我做错了什么。

 $('#stepList').append('<li class=\"steps ui-state-highlight\" style=\"margin-top:10px;\" >' +
                     '<div class=\"close\"><span class=\"closeSpan ui-icon ui-icon-circle-close\">&nbsp;</span>&nbsp;</div>' +
                     '<div class=\"stepNum"></div>' +
                     '<div class=\"stepInfo">Step Type: <a href=\"#\" onclick=\"editInfo(' + newStepInfo.infoID + ')\">  ' + newStepInfo.typeOfStep + '</a></div>' +
                     '<div class=\"nameDiv\"></div>' +
                     '<div class=\"sigDiv\"></div> <div class=\"disDiv"\></div></li>');
    $('.close').bind('click', function () {
        killStep(this);
    });
    renumberSteps();

    //Adding the Droppable ability to this newest added STEP
    $("#stepList li:last").droppable({
        over: function (event, ui) { alert('testOver'); }, // addFunctionsToDropBox(this, event, ui); },
        drop: function (event, ui) {
            alert('test');
            //Main function to bind all droppable events.
            //addFunctionsToDropBox(this, ev, ui);
        }
    });

我的可拖动对象在这里: $(".option").draggable({ helper: "clone" });

HTML:

<div id="mainbox">
            <div id="dropbox">
                <ul id="stepList">
                </ul>
            </div>
            <div id="rightBar">
                <div class="newStep">
                    <span class="ui-icon ui-icon-person"></span>Add a step</div>

                <div id="nameBox" class="ui-state-hover option">
                    <span class="ui-icon ui-icon-flag" style="float: left; margin-right: -0.85em;"></span>
                    Name a step.
                    <input type="text" class="ui-autocomplete-input" style="width: 95px;" id="stepName" />
                </div>

                  <div id="attachBox" class="ui-state-hover option">
                    <span class="ui-icon ui-icon-suitcase" style="float:left; margin-right: -0.85em;"></span>
                    Add attachment.
                </div>
            </div>
        </div>

这些 LI 位于也是可放置的 div 中,所以我不知道这是否会搞砸任何事情,但我知道我以前能够创建这种行为,只是现在遇到了问题。

感谢您的帮助! 托德

【问题讨论】:

    标签: jquery drag-and-drop


    【解决方案1】:

    知道了,我必须设置 'Greedy' = true 因为它位于可放置的 div 内。

    【讨论】:

      猜你喜欢
      • 2020-03-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-04-26
      • 1970-01-01
      • 1970-01-01
      • 2016-03-27
      相关资源
      最近更新 更多