Question

我使用了jQuery页面布局。现在我将元素拖到此代码可删除的页面

jQuery(function() {
  jQuery(".component").draggable({
  //  use a helper-clone that is append to 'body' so is not 'contained' by a pane
    helper:  function () { return jQuery(this).clone().appendTo('body').css('zIndex',5).show(); },
    cursor:  'move'
  });

  jQuery('.ui-layout-center').droppable({ 
     accept:  '.component',
     drop:  function () { show('.component') }
  }); 
});

但现在我无法再次拖动页面中的可丢弃元素。我在那段代码中犯了什么错误。

Answer 1

将此模板用于Draggable元素

$(".component").draggable({     
    revert: "invalid", // when not dropped, the item will revert back to its initial position
    containment: "#Content", // stick to demo-frame if present               
    helper: "clone",
    cursor: "move"
});

Answer 2

在droppable中，正如其他人所说，show没有被正确调用（请参阅jq文档）。无论如何我附加了将拖动的元素附加到ui-layout的代码......这就是我过去使用过克隆的东西，不确定你到底想要做什么：）

 jQuery(function() {
  jQuery(".component").draggable({

    helper: function () { return  $(this).clone().css({'zIndex':5,'background-color':'red'}); },
    cursor:  'move'
  });

  jQuery('.ui-layout-center').droppable({ 
      accept:  '.component'  ,
      drop:  function (event, ui) {$(this).append($(ui.draggable).clone()); }
  }); 
});

Answer 3

你的错误是

*您正在使用没有正确语法的Show（）

尝试这另一个逻辑，如Len（修改）

jQuery(document).ready(function () {
        jQuery(".component").draggable({
            helper: function () { return  $(this).clone().appendTo('body').css({'zIndex':5,'background-color':'red'}); },
            cursor:  'move'
        });
        jQuery('.ui-layout-center').droppable({
            accept:  '.component'  ,
            drop:  function (event, ui) {$(this).append($(ui.draggable).clone()); }//This is to append the clone in '.ui-layout-center' when dropped
        }); 
    });

在jQuery的拖放框中拖动元素

3 个答案: