小编Nei*_*ilC的帖子

在contentEditable元素上拖放n-Drop

互联网上有许多WYSIWYG编辑器,但我还没有找到一种实现某种形式的拖放实现的编辑器.

创建一个自己的编辑器很容易,但我希望用户能够从可编辑区域外拖动元素(即标记),并将它们放在可编辑区域内选择的位置.

在可编辑元素的特定位置注入html很容易,但是当用户在可编辑区域中的某个元素上拖动DIV时,如何确定插入符应该在何处.为了更好地说明我要解释的内容,请参阅以下方案.

可编辑区域(编辑模式下的IFRAME或其contentEditable属性设置为true的DIV)已包含以下文本:

"亲爱的,请注意......"

用户现在在可编辑区域上拖动表示元素列表中某个标记的元素,将光标移动到文本上,直到插入符号出现在文本中的逗号(,)之前,如上所示.当用户在该位置释放鼠标按钮时,将注入HTML,这可能会导致如下所示:

"亲爱的{UserFirstName},请注意......".

我不知道是否有人做过类似的事情,或者至少知道如何使用JavaScript做这件事.

任何帮助将不胜感激.

javascript drag-and-drop contenteditable

Nei*_*ilC

lucky-day

14
推荐指数

1
解决办法

5426
查看次数

IE10 - 设置特定的浏览器和文档模式

我需要在IE10中正确显示旧的Web应用程序.使用IE的开发者工具,IE10兼容性浏览器模式和IE5 Quirks文档模式的配置,被证明是最佳配置.

当浏览器是IE10时,使用代码隐藏页面来调整响应头以包含'X-UA-Compatible'HTTP头,文档模式被正确设置为IE5 Quirks模式,但浏览器模式仍然停留在IE10上.

当Web应用程序被重新考虑为跨浏览器兼容时,如何调整模式而无需用户设置任何配置(兼容性视图设置)或使用开发人员的工具栏.

internet-explorer-10

Nei*_*ilC

lucky-day

7
推荐指数

1
解决办法

6885
查看次数

在jQuery UI中触发鼠标拖动

使用jQuery 1.2.x和jQuery UI 1.5.x,可以像下面这样手动触发拖动:

jQuery("#myDiv").mousedown(function(ev) {
target = jQuery(ev.target);
if (target.hasClass("drag-me")) {
    target.draggable({
        helper: "clone",
        start: function()
        {
            console.log("drag start");
        },
        stop: function()
        {
            jQuery(this).draggable("destroy");
        }
    }).trigger("mousedown.draggable", [ev]);
} });

Run Code Online (Sandbox Code Playgroud)

它适用于以下HTML:

<div id="myDiv">
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
<div class="drag-me"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

这是一种将拖动应用于动态更改其子项的容器内的元素的方便方法.我喜欢称之为"拖曳代表团".

然而随着jQuery 1.3.x和jQuery 1.6+的发布,上面的脚本停止了工作.使用jQuery 1.3.2和jQuery UI 1.7.1会返回错误"太多的递归".

如何手动触发拖动？有什么建议？

javascript jquery user-interface triggers drag

Nei*_*ilC

2009 06-09

3
推荐指数

1
解决办法

2万
查看次数

可拖动+可排序和可滚动的Div

我有一个容器,其中包含可拖动项目列表和带有可排序项目列表的容器.可拖动和可排序列表已连接,允许用户将可拖动的克隆拖动到排序列表.

可拖动项目显示在垂直列表中,但可排序项目显示在水平列表中,通过向左浮动来实现.可排序项的容器将其溢出设置为auto,如果内容溢出,则会生成水平滚动条.两个容器紧挨着彼此出现,左侧是可拖动的,右侧是可排序的.

我遇到的问题是当可排序项目的容器向右滚动时,从draggables容器中拖动会立即触发sortables的事件.看起来好像sortables容器的内容被移动到draggables的容器后面.

这是我的代码:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
    <title>Sortables in scrollable divs</title>
    <script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
    <script type="text/javascript" language="javascript">
        $(function() {
            $("#sortable").sortable({
                start: function(event, ui) {
                    if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag start");
                },
                stop: function(event, ui) {
                    if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag stopped");
                    if (ui.item !== null) console.log("sortable item \"" + ui.item.text() + "\" drag stopped");
                }
            });

            $("#sortable").sortable("disable");

            $("#draggable li").draggable({
                connectToSortable: …

Run Code Online (Sandbox Code Playgroud)

javascript jquery scroll draggable jquery-ui-sortable

Nei*_*ilC

lucky-day

3
推荐指数

1
解决办法

3030
查看次数

SharePoint 2010 - DateTimeControl样式问题

也许有人在某个地方有同样的问题,可以帮助我.我在用户控件(标记)中使用DateTimeControl,而后者又用在SharePoint解决方案的一部分页面上.

在某些环境中,DateTimeControl样式显示为已损坏.但是,使用默认站点和任务列表,相同控件的样式工作正常.

在受折磨的环境中检查页面的HTML输出,似乎CSS样式表没有链接到页面.我检查了目录,文件确实存在.

[编辑 - 更多信息]

日期选择器弹出日历显示在iframe中,通常像这样引用:

_layouts/iframe.aspx?&cal=1&lcid=1033&langid=1033&ww=0111110&fdow=0&fwoy=0&hj=0&swn=False&minjday=109207&maxjday=2666269&date=11%2F22%2F2010

Run Code Online (Sandbox Code Playgroud)

实际文件的标记如下所示:

 
<%@ Assembly Name="Microsoft.SharePoint.ApplicationPages" %> <%@ Page Language="C#" Inherits="Microsoft.SharePoint.ApplicationPages.DatePickerFrame"       %> <%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %> <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <% SPSite spServer = SPControl.GetContextSite(Context); SPWeb spWeb = SPControl.GetContextWeb(Context); %>
<html dir="<SharePoint:EncodedLiteral runat='server' text='<%$Resources:wss,multipages_direction_dir_value%>' EncodeMethod='HtmlEncode'/>">
    <head>
    <meta name="GENERATOR" content="Microsoft SharePoint" />
    <SharePoint:CssLink runat="server"/>
    <script type="text/javascript" src="./DatePicker.js"></script>
    <title>Date Picker</title>
    </head> …

Run Code Online (Sandbox Code Playgroud)

datepicker stylesheet sharepoint-2010

Nei*_*ilC

2010 11-23

3
推荐指数

1
解决办法

8317
查看次数

Rangy&ContentEditable - 设置Caret

我正在尝试使用最新版本的"rangy"jQuery插件(1.2 beta)来将插入符号设置为具有特定偏移量的可信DIV.

但是,它在Firefox中响应一个奇怪的错误:安全错误"代码:"1000

这是违规代码:

var el = $("#editablediv"), index = 11;
var range = rangy.createRange();
range.setStart(el, index);
var sel = rangy.getSelection();
sel.setSingleRange(range);

Run Code Online (Sandbox Code Playgroud)

调用setStart函数时代码失败.

有人能举一个正确使用rangy的例子吗？

jquery contenteditable rangy

Nei*_*ilC

lucky-day

3
推荐指数

1
解决办法

3804
查看次数