在具有动态拖放功能的内容中进行精确的拖放(按钮)

Question

大家好，

         Below is my reference for my project,

http://jsfiddle.net/ChaseMoskal/T2zHQ/

我试过了，就像that.What一样，我面临的问题不是单个花哨的拖拽(按钮)，我已经动态创建了多个按钮，并试图拖拽它不能正常工作。

安装了直接添加类fancy

for(i = 1; i <=4; i++) {
     $(".choice").append("<a class='fancy'>Choice1</a>");
  }

使用Jquery.If动态添加类，我像这样添加上面的代码，我不能拖放，为什么会这样?有人能帮我摆脱这个问题吗？

下面是我的小提琴

http://jsfiddle.net/KavyaBabu/T2zHQ/159/

Answer 1

​

    $( ".word").draggable({
      revert: "invalid",
      containment: "document",
      helper: "clone",
      cursor: "move"
    });
    
      $('.blank').droppable({
      accept: ".word",
      drop: function( event, ui ) {
      //debugger;
	  event.target.innerText = ui.draggable.text();
      $(event.target).effect('highlight');
      }
    });  

.blank{
    border-radius: 5px;
    border: 1px dashed #FF5722;
    padding: 4px;
    background: rgba(255, 87, 34, 0.2);
    display:inline-block;
    min-width:100px;
    text-align:center;
}
.blank:after{
  content: '\00a0';
}
.word{
    border-radius: 5px;
    border: 1px dashed #4CAF50;
    padding: 2px;
    background: rgba(76, 175, 80, 0.3);
    display: inline-block;
    min-width: 100px;
    text-align: center;
    cursor:move;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<div>
Lorem Ipsum is simply <span class="blank"></span> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy <span class="blank"></span> ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing  <span class="blank"></span> passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<hr/>
<div>
  <span class="word" >dummy</span>
  <span class="word" >text</span>
  <span class="word" >Lorem Ipsum</span>  
</div>

​

检查此Js fiddle

在初始化DragonDrop之前，确保所有.fancy元素都存在于DOM中。