标签: draggable

我有两个要素:

1.身高固定的父母,overflow:hidden

2.它的孩子更大的固定高度.

<style type="text/css">
    .myList {list-style:none; margin:0px; padding:1px;}
    .myList li{ height:50px;  margin:4px; padding:2px;}
    .dragPanel {height:230px; border:solid; overflow:hidden;}
</style>

<div class="dragPanel">
    <ul class="myList">
        <li>1</li>
        <li>2</li>
        ...   ....
        <li>8</li>
        <li>9</li>
    </ul>
</div>

我希望能够在父div中上下拖动列表.我使用jquery ui draggable插件来实现Verticle拖动,但我不确定如何约束父div中的列表.

<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('.dragPanel').addClass("hover");
        $('.myList').draggable({ axis: 'y' });
    });
</script>

我如何为列表的位置设置Verticle上限和下限？

我试图让jquery添加新的div然后让它可拖动但我一直在尝试和寻找谷歌我在这里找不到任何东西我的代码如下

 $(document).ready(function() {

 $("#draggable").draggable({ 
   containment: 'parent',
   handle: 'drag_border',
   drag: function(e, ui) {
          var top = ui.position.top;
          var left = ui.position.left;
          $("#top").html(top);
          $("#left").html(left);
           }
       }); 
   });

       function New_Text() {   
            $("<div id=\"draggable\" style=\"width: 200px; height: 50px; border:dashed thin; background-color: #fff\">Drag me</div>").appendTo("div#drag_border"); 
              }

谢谢

我有一些拖放代码,它可以正常工作.只是有一点询问.我发现,如果我调试目的降函数中添加一个通知(如警报(draggedItem.text());),它触发警报两次当我把东西放到可拖动区域.我在另一篇文章中读到,使用droppable和sortable一起导致这个奇怪的双重事件发生.但我需要使用droppable事件来获取拖动的项目对象(ui.draggable) - 这样我就可以在删除它时操作它.如果有任何其他方式获得可拖动对象,请告诉我:)如果你有解释为什么会发生这种情况,那将是有趣的...

$(".field > li").draggable({
    helper:'clone',
    opacity: 0.4,
    connectToSortable:'.dragrow'
});

$(".dragrow").droppable({
    drop: function(e, ui) {
        draggedItem = ui.draggable;
        //alert(draggedItem.text());
    }
}).sortable({ //code here to do stuff with 'draggedItem'

我还有另一个与此相关的查询,但由于我的代码很大,我无法在这里发布完整的内容.所以我明白,如果你无法提供帮助 - 只要有些事情让人想起来真的很酷.基本上我有一个'块'列表,我可以拖动到多行.可以使用toggle事件隐藏各个行.如果我有3行,我可以将块拖动到其中任何一行.如果我然后隐藏第一个,我现在无法拖入另外两行.我仍然可以对它们进行排序.一旦我开始对它们进行排序,我就可以再次拖入它们.奇怪的...

我正在尝试使用jQuery draggable.当拖动然后恢复时,恢复并不总是将可拖动对象精确地定位到它开始的位置 - 它可以是几个像素.

HTML:

<div id="draggable2" class="formsection ui-widget-content resizable">
<p>I am draggable2</p>
</div>

jQuery的:

$(".formsection").draggable({
    grid: [20, 20],
    revert: true, 
    zIndex: 9700,
}); 

CSS

.formsection{position:absolute; top:20px; left:20px; width: 220px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; 
             background-color:#eee; border:solid 1px green; }

它似乎第一次工作,但如果第二次拖动它总是出来,但不一致.谁知道如何解决？

第一个问题,所以要善良:)

我想要做的是在用户释放draggable时,以及在还原动画完成之前调用函数.

据我所知,只有在还原完成后才会调用stop事件.我已经尝试将函数传递给draggable的revert选项,但它似乎不起作用.这是我的一些代码来展示;

$("a").draggable({
    helper:function(){
        return $("<div/>",{id:"mydrag",text:"link"}).appendTo("body");
    },
    revert:function(evt,ui){
        // $("#mydrag").fadeOut("slow");
        return true;
    },
    stop:function(evt,ui){
        console.log("fin");
    }
});

如果我取消注释恢复函数的第一行 - 淡出 - 则元素淡出但不会恢复.当还原动画完成时,控制台仅记录"fin".

谁能帮我？毋庸置疑,我已经谷歌搜索了很多答案,但没有运气.

巴斯特

我通常不会提出这样的问题/答案,但我认为我会这样做,因为我已经看过这个问题20多次了,而且没有一个答案确实有效.简而言之,问题是如果你有可滚动的内容(overflow: auto;在可拖动的jQuery项目内的任何地方,当你单击并拖动滚动条时,父可拖动容器随之拖动.所以,我花了一些时间来编写解决方案.

这是一个会出现此问题的html示例:

<div class="draggable" style="width:100px;height:100px;">
  <div id="content" style="width:80px;height:80px;overflow:auto;">
    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
  </div>
</div>

将元素初始化为可拖动的典型方法是这样的:

$(".draggable").draggable()

我使用jQuery ui draggable但选项appendTo不起作用.但是其他选项如遏制或网格正常工作.这是代码:

HTML

<div id="demo">
</div>
<div id="sidebar">
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div> 
</div>

脚本

jQuery(".item").draggable({ appendTo: "#demo", grid: [ 10, 10 ], containment: "#demo" });

CSS

#demo {
    width: 500px;
    height: 500px;
    border: 1px solid black;
    float: left;
}
#draggable {
    background: red;
    width: 50px;
    height: 50px;
}
#sidebar {
    float: left;
    width: 300px;
}
.item {
    cursor: pointer;
    background: black;
    width: 100px;
    height: 100px;
    margin: 10px;
}

这是一个现场演示:http: …

我准备好了注释,但试着弄清楚如何使用我的代码使其可拖动:

-(IBAction) updateLocation:(id)sender{

    MKCoordinateRegion newRegion;

    newRegion.center.latitude = mapView.userLocation.location.coordinate.latitude;
    newRegion.center.longitude = mapView.userLocation.location.coordinate.longitude;

    newRegion.span.latitudeDelta = 0.0004f;
    newRegion.span.longitudeDelta = 0.0004f;

    [mapView setRegion: newRegion animated: YES];


    CLLocationCoordinate2D coordinate;
    coordinate.latitude = mapView.userLocation.location.coordinate.latitude;
    coordinate.longitude = mapView.userLocation.location.coordinate.longitude;

    MKPointAnnotation *annotation = [[MKPointAnnotation alloc] init];

    [annotation setCoordinate: coordinate];
    [annotation setTitle: @"Your Car is parked here"];
    [annotation setSubtitle: @"Come here for pepsi"];


    [mapView addAnnotation: annotation];
    [mapView setZoomEnabled: YES];
    [mapView setScrollEnabled: YES];
}

提前致谢!

我正在使用Google地图在Android上做一个小项目.我有一个问题 - 只需单击它就可以使标记可拖动,而不是长按.例如:我单击标记,它会更改图标,我可以将其拖动到地图中的任何位置,然后在另一次点击后,他将无法再次拖动并更改其图标？(即使你发布标记,从第一次点击到第二次标记必须一直可拖动)

我正在尝试组合一个可拖动的面板(在顶部)和一个可排序的面板(底部).

拖动工作正常,但排序失败.

这是我的JS小提琴:http: //jsfiddle.net/dmUKY/9/

drag'n drop和sortable函数共享该droppable:drop函数.排序元素时,该函数必须替换所选对象.

 drop: function (event, ui) {
    //alert($(this).parent().html());
    //alert($(ui.helper).attr('class'));
    var obj;
    if ($(ui.helper).hasClass('draggable')) {
        //alert('draggable');
      obj = $(ui.helper).clone();  
      obj.removeClass('draggable').addClass('editable')
      //obj.addClass('droppable');
      $(this).parent().append(obj);

    }


    //alert($(this).parent().html());
}

我应该如何结合这两个功能？