标签: jquery-ui-droppable

我有一个照片列表,并且我已经添加了draggable,但是当将照片拖到父div之外时,我想要更改它的类,这样就表明如果删除它,它将被删除,然后当用户丢弃它,我希望它启动一个功能.(只有在父div之外)

<ul class="photos">
<li><img src=""/></li>
<li><img src=""/></li>
</ul>

所以当li被拖到.photos之外时,会触发添加类,然后如果它被丢弃在它之外,那么它会触发并触发事件以将其删除.

我有3个div元素都有类abs,只有其中一个有和其他类outside,如下所示.所有元素都是可拖动和可放置的(使用jquery ui).

问题是我不希望带有类的div outside被放入其他absdiv或接受任何absdiv被放入其中.我只希望能够在没有任何存在的情况下abs进入其他人.我尝试了以下但我仍然可以将div拖入其他div.我不要那个.你能帮我指导一下防止这种情况发生的正确方法. absoutsideoutsideabs

在http://jsfiddle.net/PWh2L/上查看jsfiddle

<div class="abs"></div>
<div class="abs outside"></div>
<div class="abs"></div>

$('.abs').draggable();
$('.abs:not(.outside)').droppable({
    accept: '.abs',
    hoverClass: "drop-hover",
    tolerance: "pointer",
    greedy: true
})

我四处搜索,找不到解决这个问题的方法.

我正在尝试集成jqueryUI可排序和可拖动但我似乎无法让它工作.

我在这里有一个非常基本的演示.我试图将其简化为SIMPLEST实现,因为我在SO上找到的所有其他示例都相当复杂.

http://jsfiddle.net/e4Z8N/7/

有谁知道为什么这个基本的例子不起作用？

编辑:我发现它是CSS类,破坏了整个事情.如果你拿走CSS类就可以了.工作版没有CSS类http://jsfiddle.net/e4Z8N/17/有谁知道它为什么会这样？

我有一个jQuery UI droppable元素,当一个draggable悬停在它上面时我想变得更大.我已尝试使用hoverClass选项并绑定到drophover事件.

在视觉上,这两种方法都可以正常工作.但是,一旦draggable退出droppable的原始(较小)边界,jQuery UI将其解释为"dropout",尽管仍然在当前(较大)边界内.

例如,js:

$("#dropable").droppable({
    hoverClass: 'hovering'
}.bind('dropout', function () {console.log('dropout')});

CSS:

#droppable { background: teal; height: 10px; }
#droppable.hovering { height: 200px; }

在这种情况下,当可拖动悬停在可放置的粪便上时,可放置的粪便在视觉上增加到200px.如果此时,拖动器向下移动了20px,我预计它仍将悬停在可放置的上方.相反,jQuery UI会触发dropout事件,而droppable会恢复为10px高.

任何人都知道如何让它以我期望的方式行事吗？

jsFiddle示例:http://jsfiddle.net/kWFb9/

我的页面上有几个可拖动和可放置的元素,它们具有accept属性.

目前我的代码设置如下:

$(".answer." + answer).draggable({
    revert: "invalid"
    , snap: ".graph"
});
$(".graph." + graph).droppable({
    accept: ".answer." + answer
});

因此,如果答案不正确,它将恢复到原来的位置.

用户还需要能够重置页面上的所有内容.我尝试了以下,但它不起作用:

$("btnReset").click(function(){
   $(".graph.A").draggable({revert:true});
});

更新

js小提琴（更新）在这里

我想知道，拖动元素是否在任何列内？

拖动时对我有用，Left to right但是拖动时不起作用right to left。

S

var isOutside = true;

$('.drag').draggable({
    helper : 'clone',
    drag : function(e, ui){
        if(isOutside)    
           return;
        //here is my code;
    },
});

$('.column').droppable({

    over : function(){
        isOutside = false;
        $('p').text('dragging inside');
    },
    out : function(){
         isOutside = true;
         $('p').text('dragging outside');
    }
});

已经提出了这个问题的变化,但答案都不同,有点过时,并且对我不起作用所以我希望这是jQuery中我改变的语法规则的问题.

方案HTML:

<div id="theDroppable">Droppable</div>
<div id="theDraggable">Draggable</div>
<div id="theTrigger">Click to trigger a drop</div>

jQuery:

$( "#theDroppable" )
    .droppable({
      drop: function( event, ui ) {
          alert('dropped');
      }
    });

$( "#theDraggable" ).draggable({});

$( "#theTrigger" ).click(function(){$( "#theDroppable" ).trigger('drop')});

小提琴:http://jsfiddle.net/7Bewj/

上面创建了一个Droppable,一个Draggable和一个div,我想用它以某种方式触发与droppable上的drop事件相关联的函数.

拖动工作正常,将其拖动到droppable并释放触发警报.

问题是如何在不使用实际可拖动的情况下触发相同的进程...或者至少不使用掉在顶部的可拖动(例如通过单击第3个div)？

使用光标(套索)绘制一个框将.item在此JSFiddle示例中选择多个.

被选中.item的人变成了拖延..slot没有.item内部的空是有效的droppable.

当您在多个droppable上放置多个draggable时,.item如果相应的droppable无效,则只有哪个鼠标处于打开状态才会恢复.

如果删除无效的 droppable,如何使每个 draggable revert ？

使用Javascript:

$(function () {
  // we are going to store the selected objects in here
  var selected = $([]),
    total = [],
    offset = {
        top: 0,
        left: 0
    };

  $(document).selectable({
    filter: ".item",
    start: function (event, ui) { //remove draggable from selection, otherwise previous selection will still be draggable. 
        $(total).draggable("destroy");
    },
    selected: function (event, ui) { // push …

设置:[gridstack]我正在使用"0.4.0"从开发分支合并到"1.0.0-dev".

我有一个插件/小部件列,我将拖动到网格上,所以基本上我使用jQueryUI for droppable和draggable.

刚刚发现一个问题,同时调整和拖动项目周围和一段时间后尝试将另一个项目拖入网格生成并出现错误"Uncaught TypeError:无法设置属性'_grid of undefined"第933行"node._grid = self;".屏幕截图已附上.

此外,"ui-draggable-handle"还附加了一个名为"ui-draggable-dragging"的附加类.它完全打破了插件,您需要刷新页面以使所有功能恢复正常,但每个其他dragstop事件.

<div id="sidebar">
   <div class="item ui-draggables"><span>{json-config}</span></div>
</div>
<div id="grid1" class="grid-stack">
   <div class="grid-stack-item">//loaded from draggables with json config</div>
</div>

http://www.screencast.com/t/snK9VR1C442

我试图使用jquery-ui的jquery-simulate-ext插件来模拟拖放 模拟.

在我提供场景细节之前,让我告诉你这里的js小提琴.

我有3列divs.在第1列中,我有3个带有国家/地区名称的可拖动,第2列有3个空白的dropable divs 和第3列3个div带有城市名称的正常s.因此,在第一列的所有可拖动物落在第二列之后,第二和第三列行将了解乡村与城市的关系.

但问题是在模拟完成后,第一个和第二个可拖动器被丢弃在预期的可投放器上,但第三个可拖动只是粘在鼠标上而不是掉落在投放器上.要查找行为,在上面提到的js小提琴页面加载后,只需将鼠标光标移动到结果部分,您就会看到一个可拖动的鼠标也随之移动.您必须单击某处以使可拖动的坐在可放置或可拖动的部分(取决于您单击的区域).这只发生在Firefox中,而在chrome中,draggable只是随着光标一起移动到适当的可放置部分内部,然后自动进入内部.

我想要的是: 与其他可拖动器一样,第三个拖动器不应随着鼠标的移动而移动,并且应该自动坐在所需的可放置物上.

代码说明:

每个div具有类的draggable draggable_div都有一个属性data-index(值1,2,3等).droppable divs(with class droppable_blank)也是如此.现在在JS代码的开头,我有一句话:

answers_found='[1,2,3]';

这些基本上是data-index可拖动的值.值的顺序仅显示data-index可拖动值位于droppable上时的值的顺序.在上面提到的情况下,第一个值是1,因此它将是第一个(不是第二个或第三个)可拖动的,它将位于第一个droppable上.类似地,第二和第三可拖动将连续地位于第二和第三可放置.

代码执行以下for循环

for(var i =0; i<answers_found.length; i++){

从answers_found数组中获取每个值.该值是可拖动的data-index属性值.然后call_trigger_drop 函数给出2个参数:

call_trigger_drop(parseInt(answer_found_indiv),droppable_index);

第一个是可拖动索引,第二个是相应的可放置索引,即拖动将位于droppable上.然后使用以下行进行实际模拟:

draggable.simulate("drag", {
                dx: dx,
                dy: dy
            });

TL; DR:

模拟第一列中的可拖动物落在第二列上的droppables上,而第三列是正常divs.在拖放模拟之后,第3个draggable不会位于Firefox中的第3个droppable上,并随光标移动直到发生单击.如何让它像其他拖动器一样自动坐在droppable上？

编辑:
如果你想把结果作为一个普通的网页而不是js-fiddle,你可以在这里找到.

console …