Question

我想从父级拖动elemets，然后使用jquery-ui的draggable和droppable扩展将其放入iframe子级。我在父母中使用了以下代码来实现它。

$('.some-elements').draggable({
    revert:true,
    iframeFix: true,
    drag:function(event){       
        //code
    },
});

$container  =   $('iframe#id').contents();

$container.find(".drop" ).droppable({
    iframeFix: true,
    greedy: true,
    over:function( event, ui ){
        //code
    },
    drop: function( event, ui ){
        //code
    },
    out:function( event, ui ){
        //code
    }
});

我可以从prent窗口拖动项目（但是卡住和拖动滞后）并且不能将它放到正确位置的iframe中。我在父窗口和iframe子窗口中都使用了jquery-ui。不知道为什么我无法实现这一点。请帮助。

Answer 1

如果你想在子iframe中实际删除该元素，我认为你不应该将revert设置为true，对吗？这只会回到原来的位置。

查看下面的堆栈代码（或此jsfiddle），看看它是否符合您的要求。我能够将div拖放到嵌套的子iframe中。

＆＃13;

// javascript
$(function() {
  $("#draggable").draggable();
});

＆＃13;

/* css */   
#draggable {
  width: 150px;
  height: 50px;
  padding: 0.5em;
  margin-bottom: 20px;
}

＆＃13;

<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.1/themes/ui-darkness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div id="parent">
  <div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
  </div>
  <div id="child">
    <iframe></iframe>
  </div>
</div>

＆＃13;

JQuery - 从父级拖放并放入Iframe子级

1 个答案: