|
appendTo
|
string
|
'parent'
|
Sets or gets the appendTo property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { appendTo: "document.body" } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
axis
|
string
|
null
|
Sets or gets the axis property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { axis: "y" } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
cancelProperty
|
string
|
'input,textarea,button,select,option'
|
Sets or gets the cancelProperty property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { cancelProperty: ".not-sortable-item" } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
connectWith
|
string
|
true
|
Sets or gets the connectWith property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { connectWith: "#sortable1, #sortable2" } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
containment
|
string
|
false
|
Sets or gets the containment property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { containment: ".sortable-container" } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
cursor
|
string
|
'auto'
|
Sets or gets the cursor property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { cursor: "move" } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
cursorAt
|
object
|
false
|
Sets or gets the cursorAt property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { cursorAt: '{ left: 5, top:5 }' } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
delay
|
number
|
0
|
Sets or gets the delay property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { delay:500 } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { disabled:true } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
distance
|
number
|
1
|
Sets or gets the distance property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { distance:10 } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
dropOnEmpty
|
boolean
|
true
|
Sets or gets the dropOnEmpty property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { dropOnEmpty:false } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
forceHelperSize
|
boolean
|
false
|
Sets or gets the forceHelperSize property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { forceHelperSize:true } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
forcePlaceholderSize
|
boolean
|
false
|
Sets or gets the forcePlaceholderSize property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { forcePlaceholderSize:true } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
grid
|
array
|
[ 0, 0 ]
|
Sets or gets the grid property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { grid: '[ 50, 50 ]' } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
handle
|
string
|
false
|
Sets or gets the handle property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { handle: ".handle" } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
helper
|
string
|
'original'
|
Sets or gets the helper property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { helper: "clone" } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
items
|
string
|
'> *'
|
Sets or gets the items property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { items: "> div.sortable-item" } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
opacity
|
number
|
false
|
Sets or gets the opacity property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { opacity:0.5 } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
placeholderShow
|
string
|
"original"
|
Sets or gets the placeholderShow property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { placeholderShow: "sortable-placeholder" } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
revert
|
boolean
|
false
|
Sets or gets the revert property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { revert:true } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
scroll
|
boolean
|
true
|
Sets or gets the scroll property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { scroll:false } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
scrollSensitivity
|
number
|
20
|
Sets or gets the scrollSensitivity property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { scrollSensitivity:10 } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
scrollSpeed
|
number
|
20
|
Sets or gets the scrollSpeed property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { scrollSpeed:40 } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
tolerance
|
string
|
'intersect'
|
Sets or gets the tolerance property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { tolerance:pointer } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
zIndex
|
number
|
1000
|
Sets or gets the zIndex property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { zIndex:2000 } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
|
|
activate
|
Event
|
|
Code examples
Bind to the activate event of jqxSortable.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").addEventListener("activate", function(event) { // Your code here. }); }; </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
beforeStop
|
Event
|
|
Code examples
Bind to the beforeStop event of jqxSortable.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").addEventListener("beforeStop", function(event) { // Your code here. }); }; </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
change
|
Event
|
|
Code examples
Bind to the change event of jqxSortable.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").addEventListener("change", function(event) { // Your code here. }); }; </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
create
|
Event
|
|
Code examples
Bind to the create event of jqxSortable.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").addEventListener("create", function(event) { // Your code here. }); }; </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
deactivate
|
Event
|
|
Code examples
Bind to the deactivate event of jqxSortable.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").addEventListener("deactivate", function(event) { // Your code here. }); }; </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
out
|
Event
|
|
Code examples
Bind to the out event of jqxSortable.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").addEventListener("out", function(event) { // Your code here. }); }; </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
over
|
Event
|
|
Code examples
Bind to the over event of jqxSortable.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").addEventListener("over", function(event) { // Your code here. }); }; </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
receive
|
Event
|
|
Code examples
Bind to the receive event of jqxSortable.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").addEventListener("receive", function(event) { // Your code here. }); }; </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
remove
|
Event
|
|
Code examples
Bind to the remove event of jqxSortable.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").addEventListener("remove", function(event) { // Your code here. }); }; </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
sort
|
Event
|
|
Code examples
Bind to the sort event of jqxSortable.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").addEventListener("sort", function(event) { // Your code here. }); }; </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
start
|
Event
|
|
Code examples
Bind to the start event of jqxSortable.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").addEventListener("start", function(event) { // Your code here. }); }; </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
stop
|
Event
|
|
Code examples
Bind to the stop event of jqxSortable.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").addEventListener("stop", function(event) { // Your code here. }); }; </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
update
|
Event
|
|
Code examples
Bind to the update event of jqxSortable.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").addEventListener("update", function(event) { // Your code here. }); }; </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
|
|
cancelMethod
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").cancelMethod(); } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
destroy
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").destroy(); } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
disable
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").disable(); } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
enable
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").enable(); } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
refresh
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").refresh(); } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
refreshPositions
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").refreshPositions(); } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
serialize
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { document.querySelector( "jqx-sortable").serialize(); } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
|
toArray
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Array
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Sortable Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxsortable.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> window.onload = function () { var firstNames = [ "Nancy", "Andrew", "Janet", "Margaret", "Steven"]; var lastNames = [ "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan"]; var titles = [ "Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager"]; var sortableList = ''; for ( var i = 0; i < firstNames.length; i++) { var imgurl = '../../images/' + firstNames[i].toLowerCase() + '.png'; var img = '<img height="50" width="40" src="' + imgurl + '"/>'; var element = '<div><table style="min-width: 130px;"><tr><td style="width: 40px;" rowspan="2">' + img + '</td><td>' + firstNames[i] + " " + lastNames[i] + '</td></tr><tr><td>' + titles[i] + '</td></tr></table></div>'; sortableList = sortableList + element; } document.querySelector( "jqx-sortable").innerHTML = sortableList; } JQXElements.settings[ "sortableSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-sortable").toArray(); } </script> <style type="text/css"> jqx-sortable { margin: 2px; padding: 5px; float: left; width: 200px; border: lightblue solid 1px; } jqx-sortable div { border-radius: 5px; padding: 5px; cursor: pointer; background-color: white; color: black; border: 1px solid transparent; } jqx-sortable div:hover { border: 1px solid #356AA0; </style></head><body> <jqx-sortable settings="sortableSettings"></jqx-sortable>
|
