Question

Hiii Everyone，

100kb

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

我试过了。我面临的问题是什么，而不是单一的花式拖动（按钮）我动态创建了多个按钮，试图拖动它不能正常工作。

直接加入类花哨

         Below is my reference for my project,

使用Jquery动态添加类。如果我用上面的代码添加这样的话我不能拖放它为什么会这样？有人可以帮我解决这个问题。

以下是我的小提琴

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

Answer 1

＆＃13;

    $( ".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');
      }
    });

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

选中此Js fiddle

在启动DragonDrop之前，确保DOM中存在所有.fancy个元素。

通过动态拖动（按钮）实现精确拖放

1 个答案: