innerHTML элементы списка перетаскиваемые не работают

Это мой код. Когда я вызываю init innerHTML элемент списка, который нельзя перетаскивать, я не знаю, где я stuck.test1 и test2 не можно перетащить, чтобы его можно было перетащить?innerHTML элементы списка перетаскиваемые не работают

Live jsFiddle example

$(document).ready(function(){ 
 
$('#accordion ul').append('<li>test1</li><li>test2</li>'); 
 
    $("#accordion li").draggable({ 
 
     helper: "clone", 
 
     revert: "invalid" 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div class="grid_3 mainwindow formfields"> 
 
    <h3>Available Fields</h3> 
 
    <div id="accordion"> 
 
     <ul> 
 
      <li>First Name</li> 
 
      <li>Last Name</li> 
 
      <li>Company</li>    
 
     </ul> 
 
    </div> 
 
    </div> 
 
    </body> 
 
</html>

источник

2016-08-04 naren

http://jsfiddle.net/oowg1xpr/ – madalinivascu

Это должно работать увидеть фрагмент кода

$(document).ready(function() { 
 
    $('#accordion ul').append('<li>test1</li><li>test2</li>'); 
 
    $("#accordion li").draggable({ 
 
    helper: "clone", 
 
    revert: "invalid" 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
 

 
    <div class="grid_3 mainwindow formfields"> 
 
    <h3>Available Fields</h3> 
 
    <div id="accordion"> 
 
     <ul> 
 
     <li>First Name</li> 
 
     <li>Last Name</li> 
 
     <li>Company</li> 
 
     </ul> 
 
    </div> 
 
    </div>

источник

2016-08-04 06:05:11 madalinivascu

Включить JQuery перед Jquery UI, и он будет работать.

$(document).ready(function(){ 
 
    $("#accordion li").draggable({ 
 
     helper: "clone", 
 
     revert: "invalid" 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<div class="grid_3 mainwindow formfields"> 
 
    <h3>Available Fields</h3> 
 
    <div id="accordion"> 
 
     <ul> 
 
      <li>First Name</li> 
 
      <li>Last Name</li> 
 
      <li>Company</li>    
 
     </ul> 
 
    </div> 
 
    </div>

источник

2016-08-04 05:52:17 noob

ok JC Dev see now Я добавляю некоторый тег, используя innerhtml, например $ (document) .ready (function() {$ ('# accordion ul'). Append ('

test1

') $ ("#accordion li") .draggable ({ хелпер: "клон", возврат: "недействительный" }); }); но test1 не может быть перетаскиваемым, как это возможно. – naren

Тогда ваш случай может быть дублирующей проблемой этого: http://stackoverflow.com/questions/18789354/how-do-i-make-dynamically-created-elements-draggable – noob

Вы должны импортировать правильный JQuery и JQuery-UI-файлов.

Это работает.

Working Fiddle

$(document).ready(function(){ 
    $("#accordion li").draggable({ 
     helper: "clone", 
     revert: "invalid" 
    }); 
});

Получить файлы здесь https://jquery.com/download/

источник

2016-08-04 05:53:09

<!DOCTYPE html> 
<html> 
    <head> 
    <head> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#accordion li").draggable(); 
    }); 
    </script> 
    </head> 
    <body> 
    <div class="grid_3 mainwindow formfields"> 
    <h3>Available Fields</h3> 
    <div id="accordion"> 
     <ul> 
      <li>First Name</li> 
      <li>Last Name</li> 
      <li>Company</li>    
     </ul> 
    </div> 
    </div> 
    </body> 
</html>

источник

2016-08-04 05:56:13 Ray

innerHTML элементы списка перетаскиваемые не работают

ответ

Смежные вопросы