title: Open html link in a div using jquery
body: <p>I am trying to drag and drop html link into a div element. My requirement here is to open the link in within that div element. I have 2 divisions on my page "left-panel" and "canvas".</p>
  
  <p>Idea here is on my left panel I'll have multiple links, when I drop any of these link in canvas div it should open that html link within the canvas. One thought is to use iframe but I would like to know if this is possible with divs instead of iframe. I tried $.ajax() and load() but none of those seem to work. I'll appreciate your help in this regard. </p>
  
  <p>This is what I have done so far:</p>
  
  <p>
  </p>
  
  <pre><code>&lt;head&gt; 
          &lt;link rel="stylesheet" href="../css/jquery-ui.css" type="text/css"  /&gt; 
          &lt;script type="text/javascript" src="../scripts/jquery-1.6.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="../scripts/jquery-ui.min.js" &gt;&lt;/script&gt; 
  
  
      &lt;style&gt;     
              #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%;
              }
      &lt;/style&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrapper"&gt; 
          &lt;div id="banner"&gt;&lt;/div&gt;
          &lt;div id="content-wrapper"&gt;
              &lt;div id="content"&gt;
                      &lt;table class="layout-grid" cellspacing="0" cellpadding="0" style="height:100%;"&gt;
                          &lt;tbody&gt;
                              &lt;tr&gt;
                                  &lt;td class="left-nav"&gt;
                                      &lt;dl class="left-nav"&gt;
                                          &lt;dt&gt;Available Widgets&lt;/dt&gt;
                                          &lt;dd&gt;
                                              &lt;a href="../modules/1.html"&gt;I am no. 1&lt;/a&gt;
                                          &lt;/dd&gt;
                                          &lt;dd&gt;
                                              &lt;a href="../modules/2.html"&gt;I am no. 2&lt;/a&gt;
                                          &lt;/dd&gt;
                                          &lt;dd&gt;
                                              &lt;a href="../modules/3.html"&gt;I am no. 3&lt;/a&gt;
                                          &lt;/dd&gt;
                                      &lt;/dl&gt;
                                  &lt;/td&gt;
                                  &lt;td class="normal"&gt;                                             
                                      &lt;div id="canvasWrapper"&gt;
                                          &lt;div id="canvasFrame" class="Frame"&gt;
                                      &lt;/div&gt;
  
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div id="footer"&gt;&lt;/div&gt;
      &lt;/div&gt;  
  
      &lt;script&gt;
          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);
                  }
              });
          });
      &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>