标签: jquery-ui-droppable

我有多个可放置的div(都具有相同的大小)和一个可拖动的div.可拖动的div比一个droppable大3倍.当我在droppables div上拖动可拖动的div时,我想找到哪个droppable受到影响.

我的代码看起来像这样:

$(function () {

    $(".draggable").draggable({
        drag: function (event, ui) { }

    });
    $(".droppable").droppable({
        drop: function (event, ui) {
           alert(this.id);
        }
    });

}); 

HTML

<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div0" class="droppable">
    drop in me1!
</div>   
<div style="height:100px; width:200px; border-bottom:1px solid red;"  id="Div1" class="droppable">
    drop in me2!
</div>  
<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div2" class="droppable">
    drop in me2!
</div>  
<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div3" class="droppable">
    drop in me2!
</div>  
<div style="height:100px; width:200px; border-bottom:1px …

我有一个非常简单的图像管理器,如下所示:

<div id="container">

    <div id="draggable-images">
        <img class="images" src="image1.jpg" />
        <img class="images" src="image2.jpg" />
        <img class="images" src="image3.jpg" />
    </div>

    <div id="droppable-area>
    </div>

</div>

和jQuery一起去:

        $( ".images" ).draggable({ containment: "#container" });
        $( "#droppable-area" ).droppable();

这是CSS:

#draggable-images {
    overflow:scroll;
    overflow-x:hidden;
}

.images {
    z-index:10000;
}

图像是可拖动的,但无论设置什么包含(甚至尝试将其设置为窗口),它们都不会从其父div中出来.

有谁知道如何使它工作,或为什么它不起作用？

我已将z-index设置为高,以确保不是问题.我也试过#draggable-images没有滚动条制作div,它也没用.

似乎在jQuery的网站上像魅力一样工作,无法想象我错过了什么.

我知道标题令人困惑,但问题很容易复制.

我的页面上有一些可以放置的元素(jQueryUI),hoverClass显示它们被拖动的时间.但是,我有一些隐藏的元素,有时在拖动过程中显示,然后不应该像他们应该的那样响应他们的hoverClass.

我在这里有一个显示这种情况的jsFiddle ,但是,如果你继续拖动div最终listItems开始显示他们的hoverClass.但是,在我的网站上这永远不会发生...... hoverClass永远不会出现在新显示的项目上.

HTML

<ul>
    <li>Row1</li>
    <li>Row2</li>
    <li>Row3<span id="More">MORE...</span></li>
    <li style="display: none;">Row4</li>
    <li style="display: none;">Row5</li>
</ul>
<div id="DragMe">DragMe!</div>

CSS

#DragMe {
    position: absolute;
    height: 100px;
    width: 100px;
    border: 1px solid black;
    background-color: RGBA(255,255,255,0.5);
}
.DragOver {
    background-color: #000000;
    color: #FFFFFF;
}
#More {
    margin-left: 10px;
}

JavaScript的

$('#DragMe').draggable({
    cursorAt: {top: 50, left: 50}
});

$('li').droppable({
    hoverClass: 'DragOver'
});

$('#More').droppable({
    over: function() {
        $('li').show();
    }
});

有什么我可以改变,以使这工作正常吗？

当我创建一个div droppable并尝试设置一个drop事件函数时它不会触发:

$('.item').draggable({

});

$('.destination').droppable({
   drop: function(event, ui){
     console.log('hiii');
   }
});

当我将它放到$('.destination')div的右边时,它会触发,但如果我将它放在'.destination'div中,则不会触发它.看到完整的JS小提琴:http: //jsfiddle.net/dylanjha/8TFMS/5/

这个想法非常简单,几乎可以运作.有两个表,用户可以选择在两个表之间拖动行.当一行从table1拖到table2时,使用ajax以使用从table1中删除的数据更新数据库,添加到table2,并使用新数据重新显示这两个表.如果信息从table2拖到table1,同样的事情也有效.

您可以在此处查看代码示例.

以下是其中一个表的Javascript代码的摘录:

var startTable = "table1";
var $tabs=$("#" + startTable);
$( "tbody.connectedSortable")
.sortable({
    connectWith: ".connectedSortable",
    items: "> tr:not(:first)",
    appendTo: $tabs,
    helper:"clone",
    cursor:"move",
    zIndex: 999990
})
.disableSelection()
;
$($tabs).droppable({
    accept: ".connectedSortable tr",
    hoverClass: "ui-state-hover",
    drop:function(event, ui){
        var start= ui.draggable.attr("id");
        var desTable = $(this).attr("id");
        if(start != desTable){
            alert("The ajax should be called");
        }
        return false;
    }
});

除了一个案例外,它完美无缺.如果将一行从Table1拖到Table2,它会创建一个插槽,以显示放行该行时将插入行的位置.换句话说,如果用户将Table1中的一行拖到Table2的最后一个元素,它会创建一个打开的占位符(在Table2的最后一行下)来描述放开时行的去向.这有一个问题.如果创建了占位符但是然后将行拖到表外并放开,则该行仍然会转到占位符,但永远不会调用draggable属性.

我想要发生的是,如果创建了一个占位符,无论行放在何处,它都会转到占位符并调用与放入的表对应的可放置代码.如果没有地方-holder存在,该行应该返回到它被拖动的位置,并且不会发生任何事情.

我试过的每个例子在两个表之间拖动行都有同样的问题.你有没有办法调用droppable代码,即使行被丢弃在表外？或者也许有一种更好的方法来调用ajax而不是将行放在桌面上？任何见解将不胜感激.

我有几个div代表我的组件。我想将该组件拖放到我的Gridsystem中。但是我需要克隆它们。因此，它们仍然在“组件”菜单中，因此我可以拖动更多它们。

    GRIDSYSTEM
    $('#GridDiv').droppable({
    accept: ".draaa",
        drop: function (event, ui) {
        var draggable = ui.draggable;
        var offset = draggable.offset();

        draggable.appendTo( this ).offset( offset );
            draggable.resizable({
            // animate: true
            grid: 10,
            containment: "#GridDiv",
            stop: function(event, ui) {
                var width = ui.size.width;
                var height = ui.size.height;
                $('#width').text('width: ' + ui.size.width);
                $('#height').text('height: ' + ui.size.height);
                },
            });
        }
    });

    DRAGCOMPONENTS
     $('.draaa').draggable({ 
    grid: [ 20, 20 ],
    drag: function(event, ui){
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
       // $('#xFOR').text('x: ' …

我基于示例购物车演示实现了 jQuery 的可拖放功能。当您将其拖出可放置对象时，我希望能够将其<li>从可放置对象中删除。我认为这可能与droppable out 事件有关，但 ui 参数为空。有谁知道解决方案吗？

这是我可拖动和可放置的实现:http://jsfiddle.net/A26ww/

我有一组播放列表,我需要能够将播放列表从一个组拖到另一个组.我可以这样做但是我想很好地定位/对齐丢弃的播放列表.现在它在下降后只是处于一个尴尬的位置.

这是问题所在:

我希望丢弃的divto与droppable容器中的其他div很好地对齐.

我的代码:

$(function() {
    $(".draggable").draggable({
        revert: "invalid"
    });

    $(".droppable").droppable({
        drop: function(event, ui) {
            // TODO HELP ME
        }
    });
});

我试图将拖放元素拖放到可放置的区域.假设我有多个相同的可放置区域,class我已经drop为此编写了一个事件处理程序class.

如果我使用可缩放区域缩小-webkit-transform:scale(0.3,0.3);,则drop事件很奇怪.在可拖动元素连接到其中一个可投放区域之前,下降发生在多个可放置区域上.

我认为这个问题是因为使用了scale但我对如何解决它没有任何想法.谷歌搜索也没有帮助.

我为DEMO设置了一个小提琴.

这是我的代码

剧本

var click = {
    x: 0,
    y: 0
}; // used for recording mouse cords

$('document').ready(function(event){
    for(var i = 0 ; i <= 72 ; i++)
    {
        $('<div></div>').attr({'class':'drop_zone','id':'drop_'+i}).appendTo($('.main_container'));
    }
    $('.drop_zone').each(function(index,element){
        $(this).attr('id','drop_'+index);
    })
    $('.draggable').draggable();
    $('.draggable').on('dragstart',function(event,ui){
        $('#droppable_area_ids').html('');
        click.x = event.clientX;
        click.y = event.clientY;
    })
    $('.draggable').on('drag',function(event,ui){
        var zoom = 0.3;
        var original = ui.originalPosition;

        ui.position = {
            left: (event.clientX - click.x + original.left) / zoom, …

我需要一些控件才能在iFrame中使用Drag&Drop.我需要iframe中的功能的原因是因为我们正在构建的CMS以及"编辑页面"中的任何"绝对"css更改也将影响主站点.

我已经写了一个角度指令,并为此构建了一个小型原型,只要它在同一页面上它就完美无缺,但是当我试图在iframe中做同样的事情时,它只是不起作用.甚至从iFrame页面注册droppbale也不会显示在控制台中(当尝试登录指令时).

它是1个寻呼机代码,可在此查看 - http://78.110.163.229/angDnd/outer.html

任何指导/建议都会非常有帮助.