如何将JQuery UI对话框附加到特定的DIV标签？

Question

有没有一种简单的方法可以将jQuery UI对话框粘贴到特定的div？

实际上，一个人应该能够拖动或调整对话框的大小，但对话框不应离开div。

<script>
var dialogOptions = {
    title: "Recent",
    closeOnEscape: false,
    width:200,
    position: {
        my: "left top", at:"left+10 top+10", of:".frame"
    },
    "modal" : false,
    "resizable" : true,
    "draggable" : true,
    appendTo: ".frame"
};

$( "div.dialog" ).dialog(dialogOptions);
</script>

<div class="frame">
    <div class="dialog">
    </div>
</div>

请检查http://jsfiddle.net/TLt4b/1/

Answer 1

尝试这个：-

var dialogOptions = {
title: "Recent",
closeOnEscape: false,
width:200,
position: {
    my: "left top", at:"left+10 top+10", of:".frame"
},
"modal" : false,
"resizable" : true,
"draggable" : true,
appendTo: ".frame"  };


$( "div.dialog" ).dialog(dialogOptions).parent().resizable({
    containment: ".frame" 
}).draggable({ 
        containment: ".frame"       
})

演示： http : //jsfiddle.net/TLt4b/2/

Answer 2

试试看： -http : //jsfiddle.net/adiioo7/TLt4b/4/

JS：-

var dialogOptions = {
    title: "Recent",
    closeOnEscape: false,
    draggable: false,
    width:200,
    position: {
        my: "left top", at:"left+10 top+10", of:".frame"
    },
    modal : false,
    resizable : true
};

$( "div.dialog" ).dialog(dialogOptions).parent().draggable({ containment: ".frame" });