我正在使用jQuery UI附带的可排序函数来使我能够重新排序表行。它工作正常，这里是JSFiddle，下面是我的HTML和JS
<table style="width: 100%;">
<thead>
<tr>
<th>ID</th>
<th>Fruit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Apple</td>
</tr>
<tr>
<td>2</td>
<td>Pear</td>
</tr>
<tr class="sticky">
<td>3</td>
<td>Banana</td>
</tr>
<tr>
<td>4</td>
<td>Raspberry</td>
</tr>
<tr>
<td>5</td>
<td>Mango</td>
</tr>
</tbody>
</table>
$(function(){
$("table tbody").sortable();
});
但是我希望我能够同时拖动多行。基本上，当您拖动tr时，如果tr正好位于其下sticky，那么tr需要随之拖动=FORMULATEXT(A3)
。因此，在我的示例中，只要您想要拖动并重新排序“Pear”行，下面的“Banana”行就会随之移动。
我认为使用辅助函数可以做到这一点，但我真的不知道从哪里开始。如果有人可以告诉我最好的方法，并指出我正确的方向，这将是伟大的。
答案 0 :(得分：1)
您可以使用{
"$schema": "https://schema.management.azure.com/schemas/2015-01-01/deploymentTemplate.json#",
"contentVersion": "1.0.0.0",
"parameters": {
"mysqlPassword": {
"type": "securestring",
"metadata": {
"description": "Root password password for the MySQL database."
}
},
"adminUsername": {
"type": "string",
"metadata": {
"description": "Username for the Virtual Machine."
}
},
"adminPassword": {
"type": "securestring",
"metadata": {
"description": "Password for the Virtual Machine."
}
},
"sku": {
"type": "string",
"allowedValues": [
"Free",
"Shared",
"Basic",
"Standard",
"Premium"
],
"defaultValue": "Free",
"metadata": {
"description": "The pricing tier for the App Service plan."
}
},
"svcPlanSize": {
"type": "string",
"defaultValue": "F1",
"metadata": {
"description": "The instance size of the app."
}
},
"prefix": {
"type": "string",
"metadata": {
"description": "Prefix for all the resources."
}
}
},
"variables": {
"imagePublisher": "Canonical",
"imageOffer": "UbuntuServer",
"ubuntuOSVersion": "15.10",
"OSDiskName": "osdiskfordockersimple",
"nsgName": "[concat(parameters('prefix'),'NSG')]",
"nicName": "[concat(parameters('prefix'),'VMNic')]",
"dnsNameForPublicIP": "[parameters('prefix')]",
"extensionName": "DockerExtension",
"addressPrefix": "10.0.0.0/16",
"subnetName": "Subnet",
"subnetPrefix": "10.0.0.0/24",
"storageAccountType": "Standard_LRS",
"storageName": "wpac",
"publicIPAddressName": "[concat(parameters('prefix'),'PublicIP')]",
"publicIPAddressType": "Dynamic",
"serverFarmName": "[concat(parameters('prefix'),'SrvFrm')]",
"vmStorageAccountContainerName": "vhds",
"vmName": "[concat(parameters('prefix'),'DockerVM')]",
"vmSize": "Basic_A1",
"virtualNetworkName": "[concat(parameters('prefix'),'VNET')]",
"vnetID": "[resourceId('Microsoft.Network/virtualNetworks',variables('virtualNetworkName'))]",
"nsgID": "[resourceId('Microsoft.Network/networkSecurityGroups',variables('nsgName'))]",
"subnetRef": "[concat(variables('vnetID'),'/subnets/',variables('subnetName'))]",
"webAppName": "[concat(parameters('prefix'),'WebApp')]"
},
"resources": [
{
"type": "Microsoft.Storage/storageAccounts",
"name": "[variables('storageName')]",
"apiVersion": "2015-05-01-preview",
"location": "[resourceGroup().location]",
"properties": {
"accountType": "[variables('storageAccountType')]"
}
},
{
"apiVersion": "2015-05-01-preview",
"type": "Microsoft.Network/publicIPAddresses",
"name": "[variables('publicIPAddressName')]",
"location": "[resourceGroup().location]",
"properties": {
"publicIPAllocationMethod": "[variables('publicIPAddressType')]",
"dnsSettings": {
"domainNameLabel": "[variables('dnsNameForPublicIP')]"
}
}
},
{
"apiVersion": "2015-05-01-preview",
"type": "Microsoft.Network/virtualNetworks",
"name": "[variables('virtualNetworkName')]",
"location": "[resourceGroup().location]",
"dependsOn": [
"[variables('nsgID')]"
],
"properties": {
"addressSpace": {
"addressPrefixes": [
"[variables('addressPrefix')]"
]
},
"subnets": [
{
"name": "[variables('subnetName')]",
"properties": {
"addressPrefix": "[variables('subnetPrefix')]",
"networkSecurityGroup": {
"id": "[variables('nsgID')]"
}
}
}
]
}
},
{
"apiVersion": "2015-05-01-preview",
"type": "Microsoft.Network/networkInterfaces",
"name": "[variables('nicName')]",
"location": "[resourceGroup().location]",
"dependsOn": [
"[concat('Microsoft.Network/publicIPAddresses/', variables('publicIPAddressName'))]",
"[concat('Microsoft.Network/virtualNetworks/', variables('virtualNetworkName'))]"
],
"properties": {
"ipConfigurations": [
{
"name": "ipconfig1",
"properties": {
"privateIPAllocationMethod": "Dynamic",
"publicIPAddress": {
"id": "[resourceId('Microsoft.Network/publicIPAddresses',variables('publicIPAddressName'))]"
},
"subnet": {
"id": "[variables('subnetRef')]"
}
}
}
]
}
},
{
"apiVersion": "2015-05-01-preview",
"type": "Microsoft.Network/networkSecurityGroups",
"name": "[variables('nsgName')]",
"location": "[resourceGroup().location]",
"properties": {
"securityRules": [
{
"name": "mysql",
"properties": {
"description": "Allow MySQL",
"protocol": "Tcp",
"sourcePortRange": "*",
"destinationPortRange": "3306",
"sourceAddressPrefix": "Internet",
"destinationAddressPrefix": "*",
"access": "Allow",
"priority": 100,
"direction": "Inbound"
}
},
{
"name": "ssh",
"properties": {
"description": "Allow SSH",
"protocol": "Tcp",
"sourcePortRange": "*",
"destinationPortRange": "22",
"sourceAddressPrefix": "Internet",
"destinationAddressPrefix": "*",
"access": "Allow",
"priority": 110,
"direction": "Inbound"
}
}
]
}
},
{
"apiVersion": "2015-05-01-preview",
"type": "Microsoft.Compute/virtualMachines",
"name": "[variables('vmName')]",
"location": "[resourceGroup().location]",
"dependsOn": [
"[concat('Microsoft.Storage/storageAccounts/', variables('storageName'))]",
"[concat('Microsoft.Network/networkInterfaces/', variables('nicName'))]"
],
"properties": {
"hardwareProfile": {
"vmSize": "[variables('vmSize')]"
},
"osProfile": {
"computername": "[variables('vmName')]",
"adminUsername": "[parameters('adminUsername')]",
"adminPassword": "[parameters('adminPassword')]"
},
"storageProfile": {
"imageReference": {
"publisher": "[variables('imagePublisher')]",
"offer": "[variables('imageOffer')]",
"sku": "[variables('ubuntuOSVersion')]",
"version": "latest"
},
"osDisk": {
"name": "osdisk1",
"vhd": {
"uri": "[concat('http://',variables('storageName'),'.blob.core.windows.net/',variables('vmStorageAccountContainerName'),'/',variables('OSDiskName'),'.vhd')]"
},
"caching": "ReadWrite",
"createOption": "FromImage"
}
},
"networkProfile": {
"networkInterfaces": [
{
"id": "[resourceId('Microsoft.Network/networkInterfaces',variables('nicName'))]"
}
]
}
}
},
{
"type": "Microsoft.Compute/virtualMachines/extensions",
"name": "[concat(variables('vmName'),'/', variables('extensionName'))]",
"apiVersion": "2015-05-01-preview",
"location": "[resourceGroup().location]",
"dependsOn": [
"[concat('Microsoft.Compute/virtualMachines/', variables('vmName'))]"
],
"properties": {
"publisher": "Microsoft.Azure.Extensions",
"type": "DockerExtension",
"typeHandlerVersion": "1.1",
"autoUpgradeMinorVersion": true,
"settings": {
"compose": {
"db": {
"image": "mysql",
"ports": [
"3306:3306"
],
"volumes": [
"/var/lib/mysql:/var/lib/mysql"
],
"environment": [
"[concat('MYSQL_ROOT_PASSWORD=', parameters('mysqlPassword'))]",
"MYSQL_DATABASE=wpacMySQL",
"[concat('MYSQL_USER=', parameters('adminUsername'))]",
"[concat('MYSQL_PASSWORD=', parameters('mysqlPassword'))]"
]
}
}
}
}
},
{
"type": "Microsoft.Web/serverfarms",
"apiVersion": "2015-08-01",
"name": "[variables('serverFarmName')]",
"location": "[resourceGroup().location]",
"sku": {
"name": "[parameters('svcPlanSize')]",
"tier": "[parameters('sku')]",
"capacity": 1
}
}
]
}
事件检查下一个start是否tr class并在sticky上的拖动项后插入事件。我正在使用stop方法为“粘性”项目制作动画。
css<强> Fiddle Demo
注意：如果存在粘性项目，您只需绑定$(function() {
var $draggedItem, $stickyItem, itemWidth, itemHeight;
$("table tbody").sortable({
start: function(event, ui) {
$draggedItem = $(ui.item[0]);
//Store the constant width and height values in variables.
itemWidth = $draggedItem.width();
itemHeight = $draggedItem.height();
//next is called twice because a hidden "tr" is added when sorting.
var $nextChild = $(ui.item[0]).next().next();
if ($nextChild.hasClass('sticky')) {
$stickyItem = $nextChild;
}
else {
$stickyItem = undefined;
}
},
sort: function() {
if ($stickyItem != undefined) {
//Set the css to match the dragged item's css, with the exception of "top", which includes an offset.
$stickyItem.css({
"z-index": $draggedItem.css('z-index'),
"position": "absolute",
"width": itemWidth,
"height": itemHeight,
"left": $draggedItem.css('left'),
"top": $draggedItem.position().top + itemHeight,
});
}
},
stop: function() {
if ($stickyItem != undefined) {
$stickyItem.insertAfter($draggedItem);
//Remove the style attribute to reset to thed default style.
$stickyItem.removeAttr('style');
}
}
});
});
和sort事件即可进一步改进上述内容。