Перетащите элементы в iframe, только вернитесь
EDIT: 1
Это drag.html (главная страница) -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Handle empty lists</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
<style>
.drag {padding:10px;border:1px solid blue;margin:20px;}
</style>
<script>
$(function() {
$( ".drag" ).draggable({ helper: "clone",iframeFix: true, revert : 'invalid',cursor: "move"});
$('#frame').load(function(){
$('#frame').contents().find('#sortable3').droppable({
accept: ".drag",
drop: function( event, ui ) {
var html = '<div class="droptrue">'+ ui.draggable.html() + '</div>';
//alert(html);
$(this).append(html);
}
});
});
});
</script>
</head>
<body>
<div class="drag" style="display:inline">
Drag 1
</div>
<div class="drag " style="display:inline">
Drag 2
</div>
<div class="drag " style="display:inline">
Drag 3
</div>
<div class="drag " style="display:inline">
Drag 4
</div>
<br/><br/><br/><br/><br/>
<iframe id="frame" src="iframe.html" width="700" height="400"></iframe>
<br style="clear: both;" />
</body>
</html>
И это код iframe -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Handle empty lists</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
<style>
.droptrue {padding:5px;margin:5px 0px;border:1px solid green;}
</style>
</head>
<script>
$(function() {
$( "#sortable3" ).sortable({
placeholder: "ui-state-highlight"
});
$( ".droptrue" ).disableSelection();
});
</script>
<body>
<div id="sortable3" style="width:500px;height:300px;border:1px solid red;">
</div>
</body>
</html>
И я знаю, что без iframe я могу достичь этого легкоВот Но для моего текущего проекта я не могу устранить iframes. Так что, пожалуйста, помогите мне.
Проверьте демоВот
Красное поле находится внутри iframe, и если вы перетаскиваете элементы только внутри красного поля, если оно работает нормально. Но если вы уроните их в нижней части окна, оно вернется обратно.
Кроме того, если вы уроните перетаскиватель рядом с iframe (чуть выше iframe), он также будет успешно удален.
То, что я хочу, это то, что dragbox должен быть сброшен только в том случае, если он внутри красного прямоугольника еще вернется обратно.
Проверьтеэто
При использовании iframe существует проблема с областью опускания, но не удалось найти решение.
Заранее спасибо!