将Div类附加到超链接类-然后在单击时将超链接克隆并附加到容器

Question

1. I want to append a div class ('.link-cloner') to a hyperlink class ('.link') when you hover over any hyperlink (that has the '.link' class).
2. Then when you click on the appended (.link-cloner) class, I want to clone the hyperlink it was appended to, and append that (link) to #container.

I'm almost there, I just can't make the last part work.

Codepen: http://codepen.io/StrengthandFreedom/pen/JXEEQP/

I tried using find(), closest() & $(this) in various combinations, but I can't make it just clone the hyperlink (not the linkCloner) and append it to the #container.

jQuery:

$(document).ready(function(e) {
  /* ------------------------
    Part 1 — WORKS
  --------------------------*/
  // Store link-cloner div in variable
  var linkCloner = $('<div class="link-cloner">Cloner</div>');

  // When mouse hover over any hyperlink
  $('.link').on('mouseover', function() {

    // Append the link-cloner class to the hyperlink
    $(this).append(linkCloner);
  }).mouseleave(function() {

    //on mouse leave, remove link-cloner 
    $(linkCloner).remove();
  });
/* ------------------------
    Part 2 — DOESN'T WORK
  --------------------------*/
  //Then when you click on the appended linkCloner, 
  clone the hyperlink and append it to the #container
  $(linkCloner).on('click', function() {

  // This code is wrong.... 
  event.preventDefault();
  $('.link').clone().append('<li></li>').appendTo('#container');

  });
});

Can someone lead me in the right direction? JavaScript or jQuery, either is fine by me (I'm learning both) :-)

Answer 1

You have done just small mistake. Replace your PART 2 with below code :

$('.link').on('click', function(event) {

  // This code is wrong.... 
  event.preventDefault();
  $(this).clone().append('<li></li>').appendTo('#container');

});

Answer 2

Try to use

$().drag();

for the clone that link to div check jquery documentations

Hope Help