求救!用HtmlElement来模拟事件(InvokeMember)不成功,为何???

jacksoncan 2012-08-20 10:02:58
有这样一个网页:

http://stock.finance.sina.com.cn/hkstock/finance/01398.html

现在要将“资产负债表”的“年报”数据自动抓取出来,需要先引发右边“报表类型”选择按钮的onchange事件,使得数据由原来的全部类型变成只是年报的,我用HtmlElement来模拟事件(InvokeMember),但是却不成功,也就是页面的数据没有发生任何改变,请问高手们,这是为什么呢?代码如下:



private void btn模拟事件_Click(object sender, EventArgs e)
{
string url = "http://stock.finance.sina.com.cn/hkstock/finance/01398.html";

webBrowser1.Navigate(url);
}


private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{



//避免webbroswer.DocumentCompleted被多次引发
if ((e.Url != webBrowser1.Url) || (webBrowser1.ReadyState != WebBrowserReadyState.Complete))
return;
//下面写你要在页面加载完毕后执行的代码。

getSelectedCtrl();

}

private void getSelectedCtrl()
{
System.Windows.Forms.HtmlDocument doc = this.webBrowser1.Document;
System.Windows.Forms.HtmlElementCollection selectCtrls = doc.GetElementsByTagName("select");
string attName;

foreach (System.Windows.Forms.HtmlElement selectCtrl in selectCtrls)
{
attName = selectCtrl.GetAttribute("table");
if (attName.Equals("tableGetBalanceSheet"))//如果table属性是资产负债表的话,模拟引发“报表类型”的选择控件
{
//调试过,已经成功进入了该条件语句
// 准备参数.
Object[] args = new Object[1];
args[0] = (Object)"zero"; //zero代表报表类型为“年报”
selectCtrl.InvokeMember("onchange",args);
return;

}

}

}


...全文
798 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
intken008 2012-09-05
  • 打赏
  • 举报
回复
大神啊!收我为徒吧!!

看了你的贴,解决了一个困扰我已久的问题。。。
jacksoncan 2012-08-23
  • 打赏
  • 举报
回复
大神,您真是太厉害了,真是太感谢您了!!!

[Quote=引用 9 楼 的回复:]

没有仔细看你的代码,我写了一个,是可以的。你需要找个适当的时候停止timer就可以了。


GetData基本和你的一样,除了在函数内部取得doucment
C# code

private void getData()
{
HtmlDocument doc = webBrowser1.Document;
……
[/Quote]
宝_爸 2012-08-23
  • 打赏
  • 举报
回复
没有仔细看你的代码,我写了一个,是可以的。你需要找个适当的时候停止timer就可以了。


GetData基本和你的一样,除了在函数内部取得doucment

private void getData()
{
HtmlDocument doc = webBrowser1.Document;
。。。。。


其它部分:


System.Timers.Timer timer = null;

private void Form1_Load(object sender, EventArgs e)
{
string url = "http://stock.finance.sina.com.cn/hkstock/finance/01398.html";

webBrowser1.Navigate(url);
timer = new System.Timers.Timer(1000);
timer.AutoReset = false;
timer.Elapsed += new System.Timers.ElapsedEventHandler(Timer_Elapsed);

}

public delegate void GetDataHandler();

private void Timer_Elapsed(object sender, ElapsedEventArgs e)
{
Invoke(new GetDataHandler(getData));

timer.Start();
}


private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
//避免webbroswer.DocumentCompleted被多次引发
if ((e.Url != webBrowser1.Url) || (webBrowser1.ReadyState != WebBrowserReadyState.Complete))
return;
//下面写你要在页面加载完毕后执行的代码。

getSelectedCtrl();
}

private void getSelectedCtrl()
{
System.Windows.Forms.HtmlDocument doc = this.webBrowser1.Document;
System.Windows.Forms.HtmlElementCollection selectCtrls = doc.GetElementsByTagName("select");
string attName;

foreach (System.Windows.Forms.HtmlElement selectCtrl in selectCtrls)
{
attName = selectCtrl.GetAttribute("table");
if (attName.Equals("tableGetBalanceSheet"))//如果table属性是资产负债表的话,模拟引发“报表类型”的选择控件
{
foreach(HtmlElement option in selectCtrl.Children)
{
if(option.GetAttribute("value") == "zero")
{
option.SetAttribute("selected", "selected");
break;
}
}
selectCtrl.RaiseEvent("onchange");
timer.Start();
return;

}

}

}

宝_爸 2012-08-22
  • 打赏
  • 举报
回复
另一个方法值得一试的是直接 call javascript的方法

object result = this.Browser.InvokeScript("showOverlay", false);
但是不确定是同步的还是异步的,如果是异步的,也得设个timer等。

参考
Calling JavaScript functions in the Web Browser Control
http://www.west-wind.com/weblog/posts/2008/Sep/27/Calling-JavaScript-functions-in-the-Web-Browser-Control
宝_爸 2012-08-22
  • 打赏
  • 举报
回复
今天比较忙,你自己解决下试一试

google下没有什么好办法,只能等待一会,知道刷新后,新的的element的id出来。
不能用sleep,要用个timer.
就是启动个timer. 检测某个ID是否出现,如果出现,取得数据,如果不出现,继续等下一个internal event.

参考:
http://stackoverflow.com/questions/3794522/waiting-for-webbrowser-ajax-content

牛人Sheng Jiang 蒋晟 在里面回答了:)
  • 打赏
  • 举报
回复
在点击后当然要取得最新的网页了,不然就不能获取 到现在点击后的数据的
jacksoncan 2012-08-22
  • 打赏
  • 举报
回复
非常感谢大神您的帮助啊,不过我感觉这个好像不是等待的问题,因为我用timer控件试了一下,抓出来的数据还是原来的呀。(代码如下,不知道是否写错了,我是菜鸟,汗),另外,我后来又用手动选择了“报表类型”,等网页的数据变成了年报的数据后再打开源文件查看,发现里面的数据也是原来一样的,没有变化,这是否说明这根本就不是等待的问题呢?麻烦大神您有空的话能帮我再看看吗?不着急,只要能解决就行,不胜感激啊。





private void getSelectedCtrl()
{
System.Windows.Forms.HtmlDocument doc = this.webBrowser1.Document;
System.Windows.Forms.HtmlElementCollection selectCtrls = doc.GetElementsByTagName("select");
string attName;

foreach (System.Windows.Forms.HtmlElement selectCtrl in selectCtrls)
{
attName = selectCtrl.GetAttribute("table");
if (attName.Equals("tableGetBalanceSheet"))//如果table属性是资产负债表的话,模拟引发“报表类型”的选择控件
{
//this.richTextBox1.Text = selectCtrl.InnerText;
// 准备参数.
//Object[] args = new Object[1];
//args[0] = (Object)"zero"; //zero代表报表类型为“年报”
//selectCtrl.InvokeMember("onchange",args);
//return;

foreach (HtmlElement option in selectCtrl.Children)
{
if (option.GetAttribute("value") == "zero")
{
option.SetAttribute("selected", "selected");
break;
}
}
selectCtrl.RaiseEvent("onchange");




timer1.Interval = 5000; //5秒间隔
timer1.Start(); // 计时开始


getData(selectCtrl.Document);//引发事件成功后抓取数据
return;


}

}



}

private void timer1_Tick(object sender, EventArgs e)
{
timer1.Stop();

}



[Quote=引用 4 楼 的回复:]

太感谢您了,大神,引发事件成功了!!!
不过,引发事件成功后运行的getData()抓取数据抓出来的怎么还是原来未筛选的数据呢?烦请大神帮我再看一下哪里出问题了,可以吗?非常感谢啊!


C# code


private void getSelectedCtrl()
{
System.Windows.Forms.HtmlDocument do……
[/Quote]
宝_爸 2012-08-21
  • 打赏
  • 举报
回复
我修改后的版本,测试过了


private void getSelectedCtrl()
{
System.Windows.Forms.HtmlDocument doc = this.webBrowser1.Document;
System.Windows.Forms.HtmlElementCollection selectCtrls = doc.GetElementsByTagName("select");
string attName;

foreach (System.Windows.Forms.HtmlElement selectCtrl in selectCtrls)
{
attName = selectCtrl.GetAttribute("table");
if (attName.Equals("tableGetBalanceSheet"))//如果table属性是资产负债表的话,模拟引发“报表类型”的选择控件
{
//调试过,已经成功进入了该条件语句
// 准备参数.
//Object[] args = new Object[1];
//args[0] = (Object)"zero"; //zero代表报表类型为“年报”
//selectCtrl.InvokeMember("onchange", args);
foreach(HtmlElement option in selectCtrl.Children)
{
if(option.GetAttribute("value") == "zero")
{
option.SetAttribute("selected", "selected");
break;
}
}
selectCtrl.RaiseEvent("onchange");
return;

}

}

}
jacksoncan 2012-08-21
  • 打赏
  • 举报
回复
太感谢您了,大神,引发事件成功了!!!
不过,引发事件成功后运行的getData()抓取数据抓出来的怎么还是原来未筛选的数据呢?烦请大神帮我再看一下哪里出问题了,可以吗?非常感谢啊!




private void getSelectedCtrl()
{
System.Windows.Forms.HtmlDocument doc = this.webBrowser1.Document;
System.Windows.Forms.HtmlElementCollection selectCtrls = doc.GetElementsByTagName("select");
string attName;

foreach (System.Windows.Forms.HtmlElement selectCtrl in selectCtrls)
{
attName = selectCtrl.GetAttribute("table");
if (attName.Equals("tableGetBalanceSheet"))//如果table属性是资产负债表的话,模拟引发“报表类型”的选择控件
{
//this.richTextBox1.Text = selectCtrl.InnerText;
// 准备参数.
//Object[] args = new Object[1];
//args[0] = (Object)"zero"; //zero代表报表类型为“年报”
//selectCtrl.InvokeMember("onchange",args);
//return;

foreach (HtmlElement option in selectCtrl.Children)
{
if (option.GetAttribute("value") == "zero")
{
option.SetAttribute("selected", "selected");
break;
}
}
selectCtrl.RaiseEvent("onchange");
getData(doc);//引发事件成功后抓取数据
return;


}

}



}


private void getData(HtmlDocument doc)
{


StringBuilder str = new StringBuilder();


//System.Windows.Forms.HtmlDocument doc = this.webBrowser1.Document;
System.Windows.Forms.HtmlElement table = doc.GetElementById("tableGetBalanceSheet");//获取资产负债表
System.Windows.Forms.HtmlElementCollection trs;//行的集合
System.Windows.Forms.HtmlElementCollection ths;//项目的集合
System.Windows.Forms.HtmlElementCollection tds;//单元格的集合
int i = 0;//用于行的计数
int j = 0;//用于单元格的计数
int k = 0;//用于年报单元格的计数
this.dataGridView1.Rows.Clear();//清除表的所有行
this.dataGridView1.Columns.Clear();//清除表的列

//获取行集合并遍历之
trs = table.GetElementsByTagName("tr");
foreach (System.Windows.Forms.HtmlElement tr in trs)
{
i++;

//获取项目列的单元格集合并遍历之
ths = tr.GetElementsByTagName("th");
foreach (System.Windows.Forms.HtmlElement th in ths)
{
k++;
if (i == 1)
{
this.dataGridView1.Columns.Add(th.InnerText, th.InnerText);//添加项目列

}

this.dataGridView1.Rows.Add();
this.dataGridView1.Rows[this.dataGridView1.Rows.Count-2].Cells[0].Value=th.InnerText;//填充项目数据


}

//获取普通数据列的单元格并遍历之
tds = tr.GetElementsByTagName("td");
j = 0;
foreach (System.Windows.Forms.HtmlElement td in tds)
{
j++;

str.Append(td.InnerText + " ");

if (i == 1)
{
this.dataGridView1.Columns.Add(td.InnerText, td.InnerText);//添加普通列

}
this.dataGridView1.Rows[this.dataGridView1.Rows.Count - 2].Cells[j].Value = td.InnerText;//填充财务数据


}
str.Append("\n");



}



this.richTextBox1.Text = str.ToString();





}


jacksoncan 2012-08-21
  • 打赏
  • 举报
回复
没有人会吗?
jacksoncan 2012-08-20
  • 打赏
  • 举报
回复
有没有人知道?应该是个挺简单的问题呀,高手们
# Sortable Sortable is a minimalist JavaScript library for reorderable drag-and-drop lists. Demo: http://rubaxa.github.io/Sortable/ ## Features * Supports touch devices and [modern](http://caniuse.com/#search=drag) browsers (including IE9) * Can drag from one list to another or within the same list * CSS animation when moving items * Supports drag handles *and selectable text* (better than voidberg's html5sortable) * Smart auto-scrolling * Built using native HTML5 drag and drop API * Supports * [Meteor](https://github.com/SortableJS/meteor-sortablejs) * AngularJS * [2.0+](https://github.com/SortableJS/angular-sortablejs) * [1.*](https://github.com/SortableJS/angular-legacy-sortablejs) * React * [ES2015+](https://github.com/SortableJS/react-sortablejs) * [Mixin](https://github.com/SortableJS/react-mixin-sortablejs) * [Knockout](https://github.com/SortableJS/knockout-sortablejs) * [Polymer](https://github.com/SortableJS/polymer-sortablejs) * [Vue](https://github.com/SortableJS/Vue.Draggable) * Supports any CSS library, e.g. [Bootstrap](#bs) * Simple API * [CDN](#cdn) * No jQuery (but there is [support](#jq))
### Articles * [Sortable v1.0 — New capabilities](https://github.com/RubaXa/Sortable/wiki/Sortable-v1.0-—-New-capabilities/) (December 22, 2014) * [Sorting with the help of HTML5 Drag'n'Drop API](https://github.com/RubaXa/Sortable/wiki/Sorting-with-the-help-of-HTML5-Drag'n'Drop-API/) (December 23, 2013)
### Install Via npm ```bash $ npm install sortablejs --save ``` Via bower: ```bash $ bower install --save sortablejs ```
### Usage ```html
  • item 1
  • item 2
  • item 3
``` ```js var el = document.getElementById('items'); var sortable = Sortable.create(el); ``` You can use any element for the list and its elements, not just `ul`/`li`. Here is an [example with `div`s](http://jsbin.com/qumuwe/edit?html,js,output). --- ### Options ```js var sortable = new Sortable(el, { group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] } sort: true, // sorting inside list delay: 0, // time in milliseconds to define when the sorting should start touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event disabled: false, // Disables the sortable if set to true. store: null, // @see Store animation: 150, // ms, animation speed moving items when sorting, `0` — without animation handle: ".my-handle", // Drag handle selector within list items filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function) preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter` draggable: ".item", // Specifies which items inside the element should be draggable ghostClass: "sortable-ghost", // Class name for the drop placeholder chosenClass: "sortable-chosen", // Class name for the chosen item dragClass: "sortable-drag", // Class name for the dragging item dataIdAttr: 'data-id', forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in fallbackClass: "sortable-fallback", // Class name for the cloned DOM Element when using forceFallback fallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag. scroll: true, // or HTMLElement scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling. scrollSpeed: 10, // px setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) { dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent }, // Element is chosen onChoose: function (/**Event*/evt) { evt.oldIndex; // element index within parent }, // Element dragging started onStart: function (/**Event*/evt) { evt.oldIndex; // element index within parent }, // Element dragging ended onEnd: function (/**Event*/evt) { var itemEl = evt.item; // dragged HTMLElement evt.to; // target list evt.from; // previous list evt.oldIndex; // element's old index within old parent evt.newIndex; // element's new index within new parent }, // Element is dropped into the list from another list onAdd: function (/**Event*/evt) { // same properties as onEnd }, // Changed sorting within list onUpdate: function (/**Event*/evt) { // same properties as onEnd }, // Called by any change to the list (add / update / remove) onSort: function (/**Event*/evt) { // same properties as onEnd }, // Element is removed from the list into another list onRemove: function (/**Event*/evt) { // same properties as onEnd }, // Attempt to drag a filtered element onFilter: function (/**Event*/evt) { var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event. }, // Event when you move an item in the list or between lists onMove: function (/**Event*/evt, /**Event*/originalEvent) { // Example: http://jsbin.com/tuyafe/1/edit?js,output evt.dragged; // dragged HTMLElement evt.draggedRect; // TextRectangle {left, top, right и bottom} evt.related; // HTMLElement on which have guided evt.relatedRect; // TextRectangle originalEvent.clientY; // mouse position // return false; — for cancel }, // Called when creating a clone of element onClone: function (/**Event*/evt) { var origEl = evt.item; var cloneEl = evt.clone; } }); ``` --- #### `group` option To drag elements from one list into another, both lists must have the same `group` value. You can also define whether lists can give away, give and keep a copy (`clone`), and receive elements. * name: `String` — group name * pull: `true|false|'clone'|function` — ability to move from the list. `clone` — copy the item, rather than move. * put: `true|false|["foo", "bar"]|function` — whether elements can be added from other lists, or an array of group names from which elements can be taken. * revertClone: `boolean` — revert cloned element to initial position after moving to a another list. Demo: - http://jsbin.com/naduvo/edit?js,output - http://jsbin.com/rusuvot/edit?js,output — use of complex logic in the `pull` and` put` - http://jsbin.com/magogub/edit?js,output — use `revertClone: true` --- #### `sort` option Sorting inside list. Demo: http://jsbin.com/videzob/edit?html,js,output --- #### `delay` option Time in milliseconds to define when the sorting should start. Demo: http://jsbin.com/xizeh/edit?html,js,output --- #### `touchStartThreshold` option This option is similar to `fallbackTolerance` option. When the `delay` option is set, some phones with very sensitive touch displays like the Samsung Galaxy S8 will fire unwanted touchmove events even when your finger is not moving, resulting in the sort not triggering. This option sets the minimum pointer movement that must occur before the delayed sorting is cancelled. Values between 3 to 5 are good. --- #### `disabled` options Disables the sortable if set to `true`. Demo: http://jsbin.com/xiloqu/edit?html,js,output ```js var sortable = Sortable.create(list); document.getElementById("switcher").onclick = function () { var state = sortable.option("disabled"); // get sortable.option("disabled", !state); // set }; ``` --- #### `handle` option To make list items draggable, Sortable disables text selection by the user. That's not always desirable. To allow text selection, define a drag handler, which is an area of every list element that allows it to be dragged around. Demo: http://jsbin.com/newize/edit?html,js,output ```js Sortable.create(el, { handle: ".my-handle" }); ``` ```html
  • :: list item text one
  • :: list item text two
``` ```css .my-handle { cursor: move; cursor: -webkit-grabbing; } ``` --- #### `filter` option ```js Sortable.create(list, { filter: ".js-remove, .js-edit", onFilter: function (evt) { var item = evt.item, ctrl = evt.target; if (Sortable.utils.is(ctrl, ".js-remove")) { // Click on remove button item[removed].removeChild(item); // remove sortable item } else if (Sortable.utils.is(ctrl, ".js-edit")) { // Click on edit link // ... } } }) ``` --- #### `ghostClass` option Class name for the drop placeholder (default `sortable-ghost`). Demo: http://jsbin.com/hunifu/4/edit?css,js,output ```css .ghost { opacity: 0.4; } ``` ```js Sortable.create(list, { ghostClass: "ghost" }); ``` --- #### `chosenClass` option Class name for the chosen item (default `sortable-chosen`). Demo: http://jsbin.com/hunifu/3/edit?html,css,js,output ```css .chosen { color: #fff; background-color: #c00; } ``` ```js Sortable.create(list, { delay: 500, chosenClass: "chosen" }); ``` --- #### `forceFallback` option If set to `true`, the Fallback for non HTML5 Browser will be used, even if we are using an HTML5 Browser. This gives us the possibility to test the behaviour for older Browsers even in newer Browser, or make the Drag 'n Drop feel more consistent between Desktop , Mobile and old Browsers. On top of that, the Fallback always generates a copy of that DOM Element and appends the class `fallbackClass` defined in the options. This behaviour controls the look of this 'dragged' Element. Demo: http://jsbin.com/yacuqib/edit?html,css,js,output --- #### `fallbackTolerance` option Emulates the native drag threshold. Specify in pixels how far the mouse should move before it's considered as a drag. Useful if the items are also clickable like in a list of links. When the user clicks inside a sortable element, it's not uncommon for your hand to move a little between the time you press and the time you release. Dragging only starts if you move the pointer past a certain tolerance, so that you don't accidentally start dragging every time you click. 3 to 5 are probably good values. --- #### `scroll` option If set to `true`, the page (or sortable-area) scrolls when coming to an edge. Demo: - `window`: http://jsbin.com/tutuzeh/edit?html,js,output - `overflow: hidden`: http://jsbin.com/kolisu/edit?html,js,output --- #### `scrollFn` option Defines function that will be used for autoscrolling. el.scrollTop/el.scrollLeft is used by default. Useful when you have custom scrollbar with dedicated scroll function. --- #### `scrollSensitivity` option Defines how near the mouse must be to an edge to start scrolling. --- #### `scrollSpeed` option The speed at which the window should scroll once the mouse pointer gets within the `scrollSensitivity` distance. --- ### Event object ([demo](http://jsbin.com/xedusu/edit?js,output)) - to:`HTMLElement` — list, in which moved element. - from:`HTMLElement` — previous list - item:`HTMLElement` — dragged element - clone:`HTMLElement` - oldIndex:`Number|undefined` — old index within parent - newIndex:`Number|undefined` — new index within parent #### `move` event object - to:`HTMLElement` - from:`HTMLElement` - dragged:`HTMLElement` - draggedRect:` TextRectangle` - related:`HTMLElement` — element on which have guided - relatedRect:` TextRectangle` --- ### Method ##### option(name:`String`[, value:`*`]):`*` Get or set the option. ##### closest(el:`String`[, selector:`HTMLElement`]):`HTMLElement|null` For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree. ##### toArray():`String[]` Serializes the sortable's item `data-id`'s (`dataIdAttr` option) into an array of string. ##### sort(order:`String[]`) Sorts the elements according to the array. ```js var order = sortable.toArray(); sortable.sort(order.reverse()); // apply ``` ##### save() Save the current sorting (see [store](#store)) ##### destroy() Removes the sortable functionality completely. ---
### Store Saving and restoring of the sort. ```html
  • order
  • save
  • restore
``` ```js Sortable.create(el, { group: "localStorage-example", store: { /** * Get the order of elements. Called once during initialization. * @param {Sortable} sortable * @returns {Array} */ get: function (sortable) { var order = localStorage.getItem(sortable.options.group.name); return order ? order.split('|') : []; }, /** * Save the order of elements. Called onEnd (when the item is dropped). * @param {Sortable} sortable */ set: function (sortable) { var order = sortable.toArray(); localStorage.setItem(sortable.options.group.name, order.join('|')); } } }) ``` --- ### Bootstrap Demo: http://jsbin.com/qumuwe/edit?html,js,output ```html <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> <!-- Latest Sortable --> [removed][removed] <!-- Simple List -->
  • This is Sortable
  • It works with Bootstrap...
  • ...out of the box.
  • It has support for touch devices.
  • Just drag some elements around.
[removed] // Simple list Sortable.create(simpleList, { /* options */ }); [removed] ``` --- ### Static methods & properties ##### Sortable.create(el:`HTMLElement`[, options:`Object`]):`Sortable` Create new instance. --- ##### Sortable.active:`Sortable` Link to the active instance. --- ##### Sortable.utils * on(el`:HTMLElement`, event`:String`, fn`:Function`) — attach an event handler function * off(el`:HTMLElement`, event`:String`, fn`:Function`) — remove an event handler * css(el`:HTMLElement`)`:Object` — get the values of all the CSS properties * css(el`:HTMLElement`, prop`:String`)`:Mixed` — get the value of style properties * css(el`:HTMLElement`, prop`:String`, value`:String`) — set one CSS properties * css(el`:HTMLElement`, props`:Object`) — set more CSS properties * find(ctx`:HTMLElement`, tagName`:String`[, iterator`:Function`])`:Array` — get elements by tag name * bind(ctx`:Mixed`, fn`:Function`)`:Function` — Takes a function and returns a new one that will always have a particular context * is(el`:HTMLElement`, selector`:String`)`:Boolean` — check the current matched set of elements against a selector * closest(el`:HTMLElement`, selector`:String`[, ctx`:HTMLElement`])`:HTMLElement|Null` — for each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree * clone(el`:HTMLElement`)`:HTMLElement` — create a deep copy of the set of matched elements * toggleClass(el`:HTMLElement`, name`:String`, state`:Boolean`) — add or remove one classes from each element --- ### CDN ```html <!-- jsDelivr :: Sortable (https://www.jsdelivr.com/package/npm/sortablejs) --> [removed][removed] <!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) --> [removed][removed] ``` --- ### jQuery compatibility To assemble plugin for jQuery, perform the following steps: ```bash cd Sortable npm install grunt jquery ``` Now you can use `jquery.fn.sortable.js`:
(or `jquery.fn.sortable.min.js` if you run `grunt jquery:min`) ```js $("#list").sortable({ /* options */ }); // init $("#list").sortable("widget"); // get Sortable instance $("#list").sortable("destroy"); // destroy Sortable instance $("#list").sortable("{method-name}"); // call an instance method $("#list").sortable("{method-name}", "foo", "bar"); // call an instance method with parameters ``` And `grunt jquery:mySortableFunc` → `jquery.fn.mySortableFunc.js` --- ### Contributing (Issue/PR) Please, [read this](CONTRIBUTING.md). --- ## MIT LICENSE Copyright 2013-2017 Lebedev Konstantin http://rubaxa.github.io/Sortable/ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

110,545

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术 C#
社区管理员
  • C#
  • Web++
  • by_封爱
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

让您成为最强悍的C#开发者

试试用AI创作助手写篇文章吧