标签: jquery-ui-draggable

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

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

但现在我感到困惑:

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

我很困惑为什么下面的脚本不起作用...它附加div(import_box)并使其可拖动,但不可调整大小？我错过了什么,我尝试了一些不同的东西,但他们都要么禁用拖动,要么什么都不做以改善情况.我很乐意为你提供帮助......

function open_import_window(){
$('body').append('<div id="msg_bg"></div>');
$('body').append('<div id="import_box" class="import_box"><div class="title_bar">Import</div><div id="content_import_box"></div></div>');
$('#import_box').draggable({handle:".title_bar"}).resizable();
var window_width = $(window).innerWidth();
var import_box_left = (window_width/2)-400;
$("#import_box").css("left", import_box_left);

var window_height = $(window).innerHeight();
var import_box_top = (window_height/2)-250;
$("#import_box").css("top", import_box_top);

$.ajax({
    url: 'import.php',
    success: function(data) {
        $('#content_import_box').html(data);
        resize();
    }
});
}

我做了一个小jsfiddle:http://jsfiddle.net/YSs6U/

我使用jQuery的UI draggable组件与jquery.gantt 这里.我可以轻松地对项目进行拖动,$('.ganttRed').draggable()但问题是,一旦我们开始使用下面的滑块从左到右滚动图形,移动的元素将保留在它们的位置而不是滚动图形.

我查看了源代码,根据我的理解,margin-left在滚动期间正在更改; 但jquery-ui使用left属性并在left元素存在时保持其位置.我的CSS知识就此结束,所以如果你们中的任何一个愿意就如何解决这个问题提出任何建议; 我将非常感激.

我创建了一个演示问题的小提琴:http://jsfiddle.net/Y2cxa/.为了看到我所说的行为:

• 滚动图表(使用鼠标滚轮或底部的滑块); 事物的外观和行为应该如预期的那样.
• 移动任何洋红色(-ish)条,然后滚动.

再次感谢您的时间和任何帮助将不胜感激.

最好的祝福

我已经创建了一个拖放游戏,以便开始自学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: …

我有一个可以通过jQuery UI拖动的元素.draggable().当元素被拖动时,如何减少该元素的不透明度？

所以看起来它在被拖动时逐渐消失？

我也将恢复设置为true,并且我希望它返回完全不透明度,如果恢复开始并且正在发生.

这是我的jQuery代码:

$('#draggable').draggable({
    axis: 'x',
    revert: true,
    drag:function(event, ui){
        if(ui.position.left>0){
            console.log("moving right");
            // fade out / make opacity less as drag moves right or ui.position.left becomes higher.
        }
    }
});

这是一个JS小提琴代码:http://jsfiddle.net/EybmN/1/

我想知道并希望有人可以帮我弄清楚如何逐渐淡出/使不透明度被拖动的对象被拖动.但是如果发生了恢复并且项目开始滑回原来的位置,则将不透明度恢复为完全.

我将非常感谢任何和所有的帮助!

提前致谢!

我正在使用JQuery UI拖放我的项目.

在可拖动元素上,我有Bootstrap(3.x)工具提示.

将鼠标移到可拖动上会显示工具提示.

我希望在拖动开始时删除/隐藏可拖动克隆上的工具提示.我进行了测试和测试,但没有成功.

这是整个事情的jsfiddle设置.链接:http://jsfiddle.net/mddc/6md9h/18/

<div id="draggable" class="ui-widget-content">
  <div data-toggle="tooltip" data-original-title="Tooltip to disappear when drag starts.">Drag me</div>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>

这是javascript代码:

 $(function() {
     $( "#draggable" ).draggable({
         start: function(event, ui) {
             //this is what I hope to work, but not working!
             $(ui.helper).find('[data-toggle="tooltip"]').tooltip('hide');
         }, 
        helper: 'clone',
        revert: "invalid"
     });

    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });

    $('[data-toggle="tooltip"]').tooltip({
        'animation': …

我将“拖拽”拖到“container1”和“container2”。当它被放下时，“drag”如果在“container1”中则变成深紫色，如果在“container2”中则变成深橙色。

这就是我所拥有的，当它悬停在可放置容器上时，它会改变“拖动”，但当它被放置时它不会改变颜色。任何帮助表示赞赏！谢谢你！

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    .container {
      width: 50px;
      height: 50px;
      background: #e9559a;
      padding: 13px;
      margin: 0 5px 5px 0;
    }

    .bdrag {
      height: 100px;
      width: 100px;
      background: grey;
      padding: 5px;
    }

    .dark-purple {
      background: #8b0000;
    }

    .dark-orange {
      background: #000080
    }

    .drop-green {
      background: #38a53a;
    }

    .drop-yellow {
      background: #fbff23;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="shape-container">
          <div id="origin-container" class="container">
            <div id="dragbox" class="bdrag text-dark">
              <p>Draggable Box</p>
            </div>
          </div>
          <div id="dcontainer2" class="container"> …

我在 jQuery 中的拖放方面遇到问题。在我的代码中有一个可拖动的 div。当我将其移动到某个可放置的表格单元格时，div 的克隆将附加到该表格单元格。但是当我拖动克隆时，原始 div 会被移动。这是 drop 时调用的函数：

function(event, ui)
{
    var draggable = ui.draggable.clone(true);  // cloning including attrs and children
    draggable.draggable(); // this is something I tried with no effect
    $(this).empty(); // empty the droppable cell
    $(this).append(draggable); // append the div to the cell
}

我通过谷歌搜索找不到明确的答案。我不知道这是否与此有关，但 div 有一个相对位置（并且需要保持这种状态）。

如何确保克隆可以像原始版本一样被拖动？

解决方案! 我发现它,我忽略了我可以得到变量项的id.所以我说var item_id = item.attr('id');,这是我的解决方案.比我想象的要简单得多.谢谢大家的帮助!

好的,所以我在jQuery中有多个可拖动元素,它们都是图像,但每个都有自己的ID.无论如何,我已经设置了一个功能,一旦图像被放到droppable上就会执行.我希望能够提取图像的ID,以便我可以处理已在我的数据库中删除的图像.

function foundationsInSpot(drag_item,spot)
{
var oldSpotItem = $(spot).find('img');
if(oldSpotItem.length>0) {
    oldSpotItem.appendTo('#foundationinv').draggable({ revert: 'invalid' });
}
var item = $('<img />');
var item_id = "";
var bid = "<?= $bid ?>";
item.attr('src',drag_item.attr('src')).attr('id',drag_item.attr('id')).attr('class',drag_item.attr('class')).appendTo(spot).draggable({ revert: 'invalid' });
drag_item.remove();
alert('BenID: ' + bid + ' Foundation: ' + item_id);
var dataString = 'item_id='+ item_id + '&bid=' + bid;  
    $.ajax({
        type: "POST",
        data: dataString,
        url: "http://motb.isgreat.org/objects/pfoundations.php",
    });
}

这就是我的代码.我需要找到item_id.这是我的猜测,var item_id = $('<img />').attr('id');但它返回了空白信息.我也试过var …

我正在尝试使用jquery-ui draggable一些元素可拖动.我将helper选项设置clone 为当前元素.
它正在使克隆正确,但当我放弃克隆消失.它不会停留在被拖曳的地方.

请参阅演示小提琴链接

$('#drag').draggable({
helper: function (e, ui) {
    return $(this).clone();
}
});

我错过了什么？

我试图限制元素拖动像素的距离。我循环遍历每个子元素，将其添加到总和中，并尝试将左侧拖动限制为该数量。

我无法使用父包含，因为可拖动元素实际上并不需要父元素的边界，而是需要每个选项卡的计算宽度。

这是我到目前为止所得到的：

JavaScript

   var maxMenuWidth = 0;
   $('.tabName').each(function(index, el) {
       var menuWidth = $(this).outerWidth();

       maxMenuWidth = maxMenuWidth + menuWidth;
   });
   maxMenuWidth = maxMenuWidth;
   console.log(maxMenuWidth);

  jQuery("#TabLabels").draggable({
    axis: "x",
    cursor: "move", 
    drag: function( event, ui ) {
        ui.position.left = Math.min( 0, ui.position.left );
        ui.position.left = Math.max( maxMenuWidth, ui.position.left );
    }
  });

超文本标记语言

    <div id="TabLabels" class="ui-draggable">
      <span class="tabName">Tab 1</span>
      <span class="tabName">Tab 2</span>
      <span class="tabName">Tab 3</span>
      <span class="tabName">Tab 4</span>
   </div>

我可以从以下行限制右拖动：

ui.position.left = Math.min( 0, ui.position.left );

但下一行，

ui.position.left = Math.max( maxMenuWidth, ui.position.left …

我在jquery UI中使用draggable,我想知道UI参数有什么,因为我想知道调用stop()回调函数的句柄位置.

然后我想设置一个值来将draggable移动到特定位置.知道了,我该如何设置值(如滑块).http://jqueryui.com/demos/slider/#option-value

谢谢,