jQWidgets jqxDragDrop appendTo-Eigenschaft
jQWidgets ist ein JavaScript-Framework zum Erstellen webbasierter Anwendungen für PCs und Mobilgeräte. Es ist ein sehr leistungsfähiges, optimiertes, plattformunabhängiges und weithin unterstütztes Framework. Das jqxDragDrop wird verwendet, um ein jQuery-Drag-and-Drop-Widget darzustellen, das verwendet wird, um jedes DOM-Element ziehbar zu machen. Es kann in Kombination mit vielen Widgets wie jqxTree, jqxGrid, jqxListBox usw. verwendet werden.
Die appendTo- Eigenschaft wird verwendet, um festzulegen oder zurückzugeben, wo das Widget an das Feedback des Draggable angehängt wird. Es akzeptiert Werte vom Typ String und sein Standardwert ist 'parent'.
Syntax:
Legen Sie die appendTo- Eigenschaft fest.
$('selector').jqxDragDrop({ appendTo: String });
Gibt die appendTo- Eigenschaft zurück.
var appendTo = $('selector').jqxDragDrop('appendTo');
Verknüpfte Dateien: Laden Sie jQWidgets über den Link herunter. Suchen Sie in der HTML-Datei die Skriptdateien im heruntergeladenen Ordner.
<link rel=“stylesheet“ href=“jqwidgets/styles/jqx.base.css“ type=“text/css“ />
<script type=“text/javascript“ src=“scripts/jquery-1.11.1.min .js“></script>
<script type=“text/javascript“ src=“jqwidgets/jqx-all.js“></script>
<script type=“text/javascript“ src=“jqwidgets/jqxcore.js ”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdragdrop.js”></script>
Beispiel: Das folgende Beispiel veranschaulicht die Eigenschaft jqxDragDrop appendTo in jQWidgets.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"> </script> <script type="text/javascript" src="jqwidgets/jqx-all.js"> </script> <script type="text/javascript" src="jqwidgets/jqxcore.js"> </script> <script type="text/javascript" src="jqwidgets/jqxdragdrop.js"> </script> </head> <body class='default'> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> jQWidgets jqxDragDrop appendTo Property </h3> <div style="width: 120px; height: 120px; border: 1px solid black; background-color: green;" id="divID"> <div style="display: flex; justify-content: center; align-items: center; height: 100%;"> Drag me </div> </div> </center> <script type="text/javascript"> $(document).ready(function() { $("#divID").jqxDragDrop({ appendTo: 'body' }); }); </script> </body> </html>
Ausgabe: