A. web頁面上實現圖形的拖拽與組合 有什麼好用點的框架或者方法嘛 ··好的書籍也行 (我是搞java開發的)
拖拽效果最好的達到效果是使用最新的html5. 建議去學習一下,極大方便了用戶的操作。 html5是一個比較新的技術。它的提出極大豐富了web體驗。
B. web系統中實現圖形拖拽的功能,怎麼做
document.onmousemove=function(e){
if(isDraging===true){
var nowX=e.pageX-startX;
var nowY=e.pageY-startY;
oDrag.style.left=nowX+'px';
oDrag.style.top=nowY+'px';
return false; //重新觸發
}
}
addEventListener 有兼容問題 換document.onmousemove這種形式也可以 自己試下問題不大
C. 如何使用jQuery Draggable和Droppable實現拖拽功能
在以前的文章中我已經介紹了web開發中基本拖放原理,現在給出需要完成的功能。最後運行的效果如下圖所示:
因 為最終的左側元素節點是通過Ajax訪問後台返回json數據,然後通過Javascript動態生成這種結構,而已不能為動態生成的元素綁定drag事 件,也就不能調用draggable方法,所以我使用了一個稱之「中間拖拽容易元素」,這div一直在頁面上。只是默認不顯示,只要用戶開始拖拽左側的元 素時,它就出現了。當然這里需要自己手動添加很多代碼。
復制代碼 代碼如下:
<div id='draggableDiv' class="ui-widget-content">
中間拖拽容器元素
</div>
<script type="text/javascript">
$("#draggableDiv").draggable({
containment: "parent",
drag: function (event, ui) { console.log("拖拽中"); },
stop: function () { console.log("拖拽結束"); }
});
</script>
第二步:將 要拖的元素內容復制到draggableDiv上。實現拖動父節點時,其下面的子節點元素也要拖放到右邊。如果是拖動的子節點元素,就在右邊直接顯示子節 點元素。父節點和子節點是相對的,因為左側樹形結構的節點可以是無限級的,所以一個元素既可能是子節點元素,也會是父節點元素。通過監聽滑鼠的 mousedown和mouseup事件,來判斷用戶在拖動元素
因為最終的左側元素節點是通過Ajax訪問後台返回json數據,然後通過Javascript動態生成這種結構,而已不能為動態生成的元素綁定drag事件,也就不能調用draggable方法,所以我使用了一個稱之「中間拖拽容易元素」,這div一直在頁面上。只是默認不顯示,只要用戶開始拖拽左側的元素時,它就出現了。當然這里需要自己手動添加很多代碼。
復制代碼 代碼如下:
<div id='draggableDiv' class="ui-widget-content">
中間拖拽容器元素
</div>
<script type="text/javascript">
$("#draggableDiv").draggable({
containment: "parent",
drag: function (event, ui) { console.log("拖拽中"); },
stop: function () { console.log("拖拽結束"); }
});
</script>
第二步:將要拖的元素內容復制到draggableDiv上。實現拖動父節點時,其下面的子節點元素也要拖放到右邊。如果是拖動的子節點元素,就在右邊直接顯示子節點元素。父節點和子節點是相對的,因為左側樹形結構的節點可以是無限級的,所以一個元素既可能是子節點元素,也會是父節點元素。通過監聽滑鼠的mousedown和mouseup事件,來判斷用戶在拖動元素。
當用戶拖動B節點時,首先把B元素上的內容復制給draggableDiv元素,當用戶拖動B元素,其實是拖動draggableDiv元素。所以我們要計算出我們點擊的B元素的位置,然後讓draggableDiv在拖動時候顯示正確的位置,然後拖動就是draggableDiv元素,用戶看起來是拖動的B節點元素。
復制代碼代碼如下:
var clickElement = null; $(".threepanels .ptreelist").bind("mousedown",function (event) {
//獲取當前mousedown元素的內容
var itemContent = $(this).html(); var draggableDiv = $("#draggableDiv");
$(draggableDiv).css({ "display": "block", "height": 0 });
//將點擊的元素內容復制
clickElement = $(this).clone();
var currentdiv = $(this).offset(); $(draggableDiv).css({ "top": currentdiv.top, "left": currentdiv.left }); draggableDiv.trigger(event);
//取消默認行為 return false; });
$("#draggableDiv").mouseup(function (event) { $(this).css({ "height": "0" }); });
//拖動元素時滑鼠的位置
var dragDivLeft = 0;
var dragDivTop = 0;
$("#draggableDiv").draggable({ containment: "parent", drag: function (event, ui) { $("#draggableDiv").css({ "width": "260px", "height": "22px" });
$("#draggableDiv").append(clickElement);
var closeTop = $(".closeBar").offset().top;
dragDivLeft = event.target.offsetLeft;
dragDivTop = event.target.offsetTop; },
stop: function () {
//拖拽結束,將拖拽容器內容清空
$("#draggableDiv").html("");
$("#draggableDiv").css({"height":"0"}); }
});
D. 在eclipse j2ee版本里建了web工程,如何使用控制項拖拽方式設計網頁呢
有相應的插件,但是應該需要收費的,你可以找找破解的,或者用myeclipse,或者用dreamwear拖拽設計好頁面,在放到項目中做一些小修改
E. web開發百度地圖拖拽後又回到原點這是什麼原因
這個只是通過改變移動的位置即坐標,然後最後又將坐標值賦值為最初是值得狀態。
F. 如何在固定區域內對圖片進行拖拽操作
web里用javascript來做,網上有現成的封裝好的腳本庫(google一下drag-drop-dom)可以直接將div初始化為drag-drop-div
自己寫也行,思路就是對滑鼠的事件判斷,然後層定位.
位置記錄要持久化的話就採用ajax來做
G. c# WebBrowser控制項拖拽的問題
用winform得到拖動,然後交互給webbrowser中的腳本代碼,然後傳遞給activeX。
交互參考:http://www.fushanlang.com/blog/c-webbrowser-communicate-with-javascript-1606/
哦,是想實現某些上傳控制項的功能吧?沒做過,我懷疑是webbrowser太精簡了,應該有人成功豐富它。
找到一個源碼,有時間的話可以參考一下:
http://read.pudn.com/downloads121/sourcecode/windows/csharp/516353/ExWebBrowser.cs__.htm
源碼的說明:.net的平台所提供的WebBrowser控制項並沒有對ActiveX控制項的WebBrowser所有事件進行封裝,這導致在.net中無法處理某些事件。本代碼給出了一個擴展的WebBrowser控制項,封裝了所有ActiveX WebBrowser控制項所提供的事件,對於開發瀏覽器或相關項目的開發者有參考和幫助。
H. WEB頁面如何實現拖拽文件夾上傳
目前用戶要通過Web上傳一個文件是通過 <input type="file /"> 這個標記。具體過程需要在一個很傻的對話框里定位文件夾 -> 在大量的文件里找到目標文件 -> 確定 -> 點「上傳」按鈕。我們能不能把這個步驟簡化,實現拖拽上傳呢?
比如說,
1. 在 資源管理器 里選擇一個圖片
2. 拖拽到一個網頁,比如說一個正在編輯的博客
3. 後台AJXJ自動上傳這個圖片
4. 在正在編輯的博客的當前位置直接插入並顯示圖片。
我想用javascript實現。(跟AJAX一樣,有一點hack的味道。)
原理很簡單。首先用戶拖拽一個圖片到瀏覽器,瀏覽器會自動跳轉到這個圖片。比如說我拖拽 D:\test\1.jpg 到瀏覽器,瀏覽器會跳轉當前頁面到 file:///D:/test/1.jpg。那麼我們要做的就是在瀏覽器跳轉之前:
1. 截獲body.onunload事件,並取消瀏覽器的跳轉
2. 獲知瀏覽器將要跳轉到的頁面
3. 自動填寫 <input type="file" />的地址
4. AJAX後台上傳圖片
5. 把圖片插入當前的正在編輯位置。
發這個帖子的目的,想跟大家探討這個設想的可能性。最後希望得出一個結論:可行,還是不可行。如果可行的話我希望深入探討出一個固定的模式。(像AJAX那樣)
I. c# 在WPF中使用webbrowser 拖拽獲得圖片的問題
這個沒辦法,要自己去寫代碼下圖片,用HttpWebRequest類就行了
J. Web前端怎樣實現像excel那樣的按列拖選的表格
Web前端實現像excel那樣的按列拖選表格的方法:
1.通過flash,flex實現FLEX 功能強大的datagrid
2.通過jquery插件,js實現
JS實現可編輯的表格,雙擊可編輯,可以刪除行和列,增加行和列,重置,導出表格,也可以上下移動元素
Flexigrid – Web 2.0 Javscript Grid for jQuery - 可變列寬,自動適應表頭寬度,可通過 Ajax 連接 XML 數據源,類似 Ext Grid,但基於 jQuery 因此更輕量小巧。