當前位置:首頁 » 網頁前端 » web區域蒙版拖拽
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web區域蒙版拖拽

發布時間: 2022-06-29 12:21:59

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 因此更輕量小巧。