JQuery - 从父级拖放到 Iframe 子级

【问题标题】：JQuery - Drag from parent and drop into Iframe childJQuery - 从父级拖放到 Iframe 子级
【发布时间】：2014-09-30 06:11:37
【问题描述】：

我想从父级拖动元素，然后使用 jquery-ui 的可拖放扩展将其拖放到 iframe 子级中。我在 parent 中使用了以下代码来实现它。

$('.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
    }
});

我可以从当前窗口拖动项目（但被卡住并且拖动滞后），但无法将其放入 iframe 的正确位置。我在父窗口和 iframe 子窗口中都使用了 jquery-ui。不知道为什么我不能实现。请帮忙。

【问题讨论】：

标签： jquery jquery-ui iframe jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

如果您想实际删除子 iframe 中的元素，我认为您不应该将 revert 设置为 true，对吗？那只会将元素返回到其原始位置。

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

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

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

<!-- 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>

【讨论】：