Precise Drag & Drop innerhalb eines contenteditable mit dynamischen Drag (Knopf)

Question

Hiii Jeder,

  Below is my reference for my project, 

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

I wie that.What versucht das Problem Im Verkleidung statt einzelner Phantasie ziehen ist (Taste) Ich hatte mehrere Tasten dynamisch erstellt und versucht, es nicht richtig zu ziehen.

instaed direkte Zugabe von Klasse Phantasie

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

Add-Klasse Jquery.If dynamisch hinzufügen ich so mit über Code, den ich nicht ziehen und fallen, warum es so ist? Kann mir jemand bitte helfen Sie mir Verschwinde von diesem Problem.

Unten ist meine Geige

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; 
 
\t 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>

prüfen diese Js fiddle

Stellen Sie sicher, dass alle .fancy Elemente in DOM vorhanden ist, bevor die Dragon initilizing.