Question

我正在尝试将html链接拖放到div元素中。我的要求是在div元素中打开链接。我的页面上有两个分区“左面板”和“画布”。

这里的想法是在我的左侧面板上我将有多个链接，当我在canvas div中删除任何这些链接时，它应该在画布中打开该html链接。一个想法是使用iframe，但我想知道这是否可能与div而不是iframe。我尝试了$ .ajax（）和load（），但这些似乎都没有用。在这方面，我将非常感谢你的帮助。

这是我到目前为止所做的：

<head> 
        <link rel="stylesheet" href="../css/jquery-ui.css" type="text/css"  /> 
        <script type="text/javascript" src="../scripts/jquery-1.6.js"></script>
        <script type="text/javascript" src="../scripts/jquery-ui.min.js" ></script> 


    <style>     
            #canvasWrapper {
                border: 1px solid #DDDDDD;
                height: 100%;
                vertical-align:top;
                margin-left: auto;
                margin-right: auto;
                width:  90%; 

            }
            .Frame {
                border: 1px solid #DDDDDD;
                height: 500px;
                margin-left: auto;
                margin-right: auto;
                width:  100%; 
            }
            .hFrame {
                border: 1px solid #DDDDDD;
                height: 50%;
                width:  100%; 
                position:relative;
            }

            .nonSelectable {
                border: 1px solid #DDDDDD;
                height: 50%;
                width:  100%; 
                position:relative;
            }

            .vFrame {
                border: 1px solid #DDDDDD;
                height: 100%;
                width: 50%; 
            }

            div.vFrame {
                display:block;
                float:left;
            }

            .buttonBar {
                position: relative;
                margin-left: auto;
                margin-right: auto;
                width:90%;
            }
    </style>


</head>
<body>
    <div id="wrapper"> 
        <div id="banner"></div>
        <div id="content-wrapper">
            <div id="content">
                    <table class="layout-grid" cellspacing="0" cellpadding="0" style="height:100%;">
                        <tbody>
                            <tr>
                                <td class="left-nav">
                                    <dl class="left-nav">
                                        <dt>Available Widgets</dt>
                                        <dd>
                                            <a href="../modules/1.html">I am no. 1</a>
                                        </dd>
                                        <dd>
                                            <a href="../modules/2.html">I am no. 2</a>
                                        </dd>
                                        <dd>
                                            <a href="../modules/3.html">I am no. 3</a>
                                        </dd>
                                    </dl>
                                </td>
                                <td class="normal">                                             
                                    <div id="canvasWrapper">
                                        <div id="canvasFrame" class="Frame">
                                    </div>

                                </td>
                            </tr>
                        </tbody>
                    </table>

                </div>
            </div>

        </div>
        <div id="footer"></div>
    </div>  

    <script>
        var lnk="",fullLink;
        $(function() {
            $( ".left-nav dd" ).draggable({
                        start: function (event,ui) {
                                var module= $(ui.draggable).html();
                                lnk= $(this).children().attr("href");
                        },
                        revert: "invalid",
                        helper: "clone"

                    });
            $( "#canvasFrame" ).droppable({
                drop: function( event, ui ) {
                    $( this ).addClass( "ui-state-highlight" ).html(lnk);
                }
            });
        });
    </script>

</body>

Answer 1

使用任何Javascript框架来满足此要求：

一个是：

http://jqueryui.com/demos/slider/ - 实现滑块。

然后，让您的脚本创建动态iFrame以加载拖动的链接。

// Create an iframe element
$(‘<iframe />’);

// You can also create it with attributes set
$('<iframe id="myFrame" name="myFrame">');

// Finnaly attach it into the DOM
$('<iframe id="myFrame" name="myFrame">').appendTo(<div>);

// Setting iframe's source
$('<iframe />').attr('src', 'http://www.google.com');

Answer 2

我认为不应该这样做。人们将iFrame与嵌入式网站相关联。尝试使用iFrames，您可以轻松地执行您想要的操作。拖动开口可以使用js或jquery轻松实现尝试谷歌。

实施例： http://jsfiddle.net/CDtcq/3/

Answer 3

我知道这是一个老问题，但我已经搞乱了，这是一个基本的解决方案。将您的html更改为以下内容：

<a href="#" class="drag_link" data-id="modules/1.html">I am no. 1</a>

更改您的div以容纳一个对象，以便最初删除一个链接：

<div id="canvasFrame" class="Frame">
<object width="600" height="400">Drag and drop stuff here</object>
</div>

最后是JQuery：

var lnk1="";

 $(function() {
    $( ".drag_link" ).draggable({
        start: function (event,ui) {
            var lnk1 = $(this).data('id');
            //var module= $(ui.draggable).html();
            $( this ).addClass( "ui-state-highlight" );
            $( "#canvasFrame" ).droppable({
            drop: function( event, ui ) {
            $( this )
            .load(lnk1);
            }
        });
        }
    });
});

当每个链接都放在画布上时，它会加载相应的页面并突出显示该链接。它没有做的是将链接返回到它的原始位置，但这可以很容易地完成，我确信知识比我更多。

使用jquery在div中打开html链接

3 个答案: