将数据从一个文本框单击并拖放到另一个文本框

Question

我想创建一个功能，当我单击Textbox1中的数据时（数据基本上是一个带有“tick”的按钮，如下面的图像链接所示），那么数据应该传输到TextBox2，不再出现在TextBox1中。 如果单击数据（带有“X”图像的按钮），也可以从Textbox2中再次将数据从TextBox2传输到Textbox1，Textbox2不再包含数据。 我正在做道场。但如果答案与道场无关，那就没关系了。 我想知道dojo中是否有任何可用的功能。 javascript提示也会有所帮助：）

Answer 1

$(document).ready(function() {
  $("body").on("mouseover", ".opt", function(e) {
		$(this).attr({color: "#0000ff"});
  });
  $("body").on("click", ".opt", function(e) {
    var _divOpt;
    var _parent = $(this).parent().attr("class");
    var _index = $(this).index();
    var _html = $('<a/>')
      .attr({
        "class": "opt",
        "href": "javascript:void(0)"
      })
      .append($(this).clone())      
      .html();
    if ("div1" === _parent) {
      $(".div2").append(_html);
    } else {
      $(".div1").append(_html);
    }

    $(this).remove();
  });
})

* {
  font-family: "arial";
  font-size: 12px;
  color: #FF0000;
}

.wrapper {
  float: left;
  width: 100%;
}
.option-close{
  margin-left:50px;
}

.div1,
.div2 {
  float: left;
  width: 30%;
  height: 70%;
  padding: 5px;
  margin: 5px;
}

a div{
  float:left;
  width:100%;
  text-align:center;
}
a {
  padding: 5px;
  margin: 5px;
  border: 1px solid #cccccc; 
  float: left;
  width:70%;  
}
a:hover, div:hover, div:hover{
  color: #0000FF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="div1">
    <a class="opt" href="javascript:void(0);">
      <div class="option_value">Option 1</div>
    </a>
    <a class="opt" href="javascript:void(0);">
      <div class="option_value">Option 2</div>
    </a>
    <a class="opt" href="javascript:void(0);">
      <div class="option_value">Option 3</div>
    </a>
  </div>
  <div class="div2">
  </div>
</div>