标签: jquery-ui-droppable

我已经创建了拖放工作.在这里,我可以将拖动内容放入特定区域,但我已为可拖动项目创建每个可放置功能.我需要简化它.

$(document).ready(function() {          
    $(".list").draggable({
    helper: 'clone', 
    cursor: 'hand', 
    revert: true,
    drag: function(ev, ui) {    
        dragId = $(this).attr('id');
     }   
    }); 

    $("#td1").droppable({
      accept: '#1',
      activeClass: 'drop-active',
      hoverClass: 'dropareahover',
      drop: function(event, ui) {
        var targetId = $(this).attr("id");
        $("#" + targetId).each(function() {         
            $(this).append(ui.draggable.text());
        });        
      }
    });

    $("#td2").droppable({
      accept: '#1',
      activeClass: 'drop-active',
      hoverClass: 'dropareahover',
      drop: function(event, ui) {
        var targetId = $(this).attr("id");
        $("#" + targetId).each(function() {         
            $(this).append(ui.draggable.text());
        });        
      }
    });

    $("#td3").droppable({
      accept: '#2',
      activeClass: 'drop-active',
      hoverClass: 'dropareahover',
      drop: function(event, ui) {
        var targetId = $(this).attr("id"); …

我不知道怎么问这个,但是我想创建一个界面,左边有三个元素(A,B,C),可以拖到右边的三个元素(1,2,3).

我希望左侧项目在删除时捕捉到正确的项目,但是可以与其他两个项目互换.

我可以让A,B和C捕捉到右侧,但似乎无法使它们能够被交换.如果我设置了ui.draggable.position下降,那么我无法弄清楚如何在右侧重新排列它们.我已经尝试克隆并删除它们无济于事,我最终得到了一些错误.

到目前为止我有这个:http://jsfiddle.net/7xFsr/13/

提前致谢!

我有一个客户要求我做一些类似于你在主流T恤网站上看到的衬衫设计师的东西.

它需要的是用户能够在文本输入中输入文本,然后在图像周围拖动文本.我有两个主要问题,如果我能解决它,我将能够做这个项目......

关注1:如何让文本拖动图像？我的想法是使用Jquery UI draggable来拖动页面周围的文本.我只是使用jquery来获取文本输入的值并将其放入可拖动的div中.这听起来像个好计划吗？

关注2:如何拍摄主要div的快照,其中包含他的衬衫图像和文本在他想要的位置,以便我可以将图像传递给网站所有者？是否有某种脚本可以拍摄div的快照？我四处寻找答案,但找不到多少.

任何帮助是极大的赞赏

我正在使用jQuery UI Draggable和Droppable小部件实现拖放。（Sortable没有为我提供足够的灵活性。）

拖动时，我正在动态创建放置占位符元素以精确显示放置放置的位置。

但是如何使此放置占位符本身可放置？如果创建它，然后立即对其调用该droppable()方法，则没有任何效果。因此，如果他们将用户直接放在放置占位符上，我怎么能检测到呢？

您可以在http://jsbin.com/uciviy/14上看到到目前为止的内容。

我正试图围绕正确使用jQuery UI的droppable工具.我正在研究一个最终将作为队列运行的列表.这是一个图书俱乐部,顾客可以选择他们想要运送给他们的书籍,以及订购的顺序.它类似于Netflix的原始商业模式(流媒体之前),用户可以在其中设置他们想要感兴趣的DVD队列.

因此,将有两个列表,一个表示用户的队列,另一个表示符合条件的项目.他们可以将符合条件的项目列表中的项目拖动到其队列中.在这种情况下,该项目将保留在"符合条件的项目"列表中,并将克隆添加到其队列中(因为它们可以添加多个相同的项目).

队列应该可以通过拖放重新排序,但我还没有那么远.一步一步来.

在处理"从符合条件的项目列表拖到队列列表"步骤时,我遇到了以下问题:添加到列表中的新项目不是放置目标.看看代码,这是有道理的:

<ul id='list1'>
    <li>Some</li>
    <li>Thing</li>
</ul>

<ul id='list2'>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
    <li>Electric Banana</li>
    <li>Flamingo Pink</li>
</ul>

jQuery(document).ready(function($) {
    $('#list2 li').draggable( {
        cursor: 'move',
        helper: 'clone',
    });
    $('#list1 li').droppable({
        drop: function(event, ui){
            console.log(event);
            console.log(ui);

            var dropElement = jQuery.clone(ui.draggable[0]);
            // Get rid of the inline styles that jQuery has put on the element.
            jQuery(event.target).before(dropElement);
        }
    });
});

您可以看到droppable侦听器仅用于初始化期间#list1中的项目.所以当你从#list2中拖动它时,它会被添加到列表中,但是没有drop事件的监听器.

我通过向每个添加到列表中的项添加一个drop listener来修复此问题(请参阅小提琴):

jQuery(document).ready(function($) {
    $('#list2 li').draggable( {
        cursor: 'move',
        helper: 'clone',
    });
    $('#list1 li').droppable({ drop: dropHandler });

    function …

问题

我有4张图片.用户可以将它们拖放到另一个列表并更改图像的顺序.目标是用户选择图像的顺序.问题是,当它们彼此放置时,我无法交换这些图像.

HTML

<ul id="choices">
    <li><img src="http://placehold.it/200x200&text=1" /></li>
    <li><img src="http://placehold.it/200x200&text=2" /></li>
    <li><img src="http://placehold.it/200x200&text=3" /></li>
    <li><img src="http://placehold.it/200x200&text=4" /></li>
</ul>

<ul id="answers">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

jQuery的

(function ($) {

    $("#choices li img").draggable({
        revert: true,
        zIndex: 10,
        snap: "#answers li",
        snapMode: "inner",
        snapTolerance: 40
    });

    $("#answers li").droppable({
        drop: function (event, ui) {
            var dropped = ui.draggable;
            var droppedOn = this;

            if ($(droppedOn).children().length > 0) {
                alert("I need to swap these");
            }

            $(dropped).detach().css({
                top: 0,
                left: 0
            }).prependTo($(droppedOn));
        }
    });
})(jQuery);

CSS(不重要) …

我正在尝试将jQuery draggable,droppable和sortable结合起来; 但是,我一直有问题.有谁能够帮我？

基本上,这个想法在这里说明:

• A,B,C,D,E瓦片可以在上部可放置和可排序之间移动.
• 自定义(*)磁贴只能在左侧可放置和可排序之间移动.

此外,我正在尝试在必要时在任何站点停用并重新激活所有这些.

这就是我所拥有的,但它非常多而且不漂亮:

JS

var gameContainer = $(".game");

var myTray = $(".tray").sortable({
    containment: gameContainer,
    helper: "clone",
    revert: 100,
    tolerance: "pointer",
    update: function(ev, ui) {
        ui.item.addClass("ontray").css({
            "left": "0px",
            "position": "static",
            "top": "0px"
        });
    }
}).disableSelection();

var setTileDraggable = function(tileSelector) {
    tileSelector.draggable({
        connectToSortable: myTray,
        containment: gameContainer,
        helper: "original",
        revert: "invalid"
    }).disableSelection();
};

var myBoard = $(".board").droppable({
    accept: ".tile:not(.red)",
    drop: function(ev, ui) {
        if (ui.draggable.hasClass("ontray")) {
            // tile (not red) coming from tray, place it into .tiles child …

我想将一个项目拖入容器.以及是否在容器中的项目,它既可以排序,也可以将项目从容器中拖出,顺序仍然正确.

但是现在当你将一个项目拖入容器时,它就不能再将它拖出来了.

这里是jsfiddle链接

anyone can help ? huge thanks!

我有jquery draggable/droppable使用包含和帮助选项集.我想要做的是将删除项的顶部和左侧参数存储在两个变量中.

我已在以下示例中实现了此功能(将新文档图标拖到框中),但报告的位置是相对于原始图标而不是父DIV的位置.图标和可放置框都是绝对定位的.

http://www.instructuk.com/drop.php

有谁知道如何获得与父母相关的位置而不是图标？

当我尝试使用Jquery对一些数据进行排序时,我想我会使用拖放操作.后来,我访问了jQueryui网站.它们具有"拖放"功能和可排序功能.

现在我实现了"拖放"功能来对HTML表行进行排序,同时保存它们在数据库中的位置.

但现在我感到困惑:

1. Sortable也可以执行相同的功能吗？
2. Sortable是否仅适用于UL或OL或LI？它可以与Table Row一起使用吗？
3. 拖放行时有什么区别？(交换位置),与Sortable(排序行)相比.这些不同的情况？我真的很困惑这些概念.
4. 这是使用HTML表行进行排序的正确方法(通过Draggable和Droppable,就像我现在一样)？
5. 有什么时候可以使用Sortable与Draggable/droppable

我已经创建了一个拖放游戏,以便开始自学jquery.一切似乎都有效,但你可以将多个项目放在同一个方格上.如果占位符中有图像,我想禁用droppable.

我调查过:

`greedy: true`

这会禁用掉线,但我不知道如何再次启用它,还有:

$(this).droppable( 'disable' );

如果块/图像恢复到原始位置或移动到另一个方块,我可以得到这两个来禁用掉落但不知道如何让它们再次启用它.

完整版:http: //creativelabel.co.uk/drag-and-drop/

更新:这是可放置插槽的代码.

  for ( var i=0; i<=19; i++ ) {
  var images = 'images/slot' + slotNumbers[i] + '.jpg';
$('<div class="placeholder"><div class="img-slot"></div></div>').attr('id', 'slot'+slotNumbers[i]).data( 'slotNumbers', slotNumbers[i] ).appendTo( '#imgSlots' ).droppable( {
      accept: '#images img',
      hoverClass: 'hovered',
      drop: handleDropEvent,
      activate: handleDragEvent
});

这是drop:事件代码:

  function handleDropEvent( event, ui ) {
  var slotNumber = $(this).data( 'slotNumbers' );
  var imgNumber = ui.draggable.data( 'number' );
  ui.draggable.addClass( 'dropped' );
  $(this).droppable( 'disable' );
  ui.draggable.position( { of: …

angular-dragdrop示例包含以下示例:

"克隆购物卡"

只有它没有克隆.它似乎是这个例子的重新实现:

http://jqueryui.com/droppable/#shopping-cart

哪个克隆.

那么这个功能在角度拖拽中是不存在的？

我尝试使用JQuery UI可排序列表基于Bootstrap构建页面.我在全局空间中有一个列表,在Tabs中有两个列表,我喜欢从外部列表中拖动项目并将其拖放到选项卡导航以添加到列表中

但是,当我切换到引导程序选项卡导航时,外部项目上的删除消失但没有出现在选项卡列表中这是我的示例基于JQ UI"连接列表与选项卡"

这是我的JS FIDDLE

$(function() {
    $( "#sortable0, #sortable1, #sortable2" ).sortable().disableSelection();

    var $tabs = $( "#tabs" );//.tabs();

    $('#myTab a:last').tab('show');

    var $tab_items = $( "ul:first li", $tabs ).droppable({
      accept: ".connectedSortable li",
      hoverClass: "ui-state-hover",
      drop: function( event, ui ) {
        var $item = $( this );
        var $list = $( $item.find( "a" ).attr( "href" ) )
          .find( ".connectedSortable" );

        ui.draggable.hide( "slow", function() {
          $tabs.tabs( "option", "active", $tab_items.index( $item ) );
          $( this ).appendTo( $list ).show( "slow" );
        });
      }
    }); …